JavaScript面向对象编程指南--读书笔记（下）

第六章：继承

原型链方法(防传统)

function Shape() {
  this.nama = 'Shape';
  this.toStrig = function() {
    rreturn this.name;
  }
}

function TwoDShape() {
  this.name = '2D shape';
}

function Triangle(side, height) {
  this.name = 'Triangle';
  this.side = side;
  this.height = height;
  this.getArea = function(){
    return  this.side*this.height / 2;
  }
}

TwoDShap.prototype = new Shape();
Triangle.prototype = new TwoDShap();

TwoDShap.prototype.constructor = TwoDShap;
Triangle.prototype.constructor = Triangle;

var my = new Triangle(5,6)
my.getArea (); // 25
my.toStrig(); //  Triangle

切记：JavaScript是一种完全依靠对象的语言，它没有类（class）的概念。因此我们需要new构造一个实体，然后这样才能通过该实体的属性完成相关的继承工作，而不能直接继承构造器。确保了在继承实现之后，我们队构造器进行任何的修改，并不会影响到原有者，我们只是继承了它的一个实例，最后还要对constructor进行重置。
强调：必须在扩展原型对象之前完成继承关系的构建。

只继承于原型法

出于对效率考虑，需要尽可能把一些可重用的属性和方法添加到原型中去，如养成这样的好习惯，我们可仅仅依靠原型就可完成继承关系。可作为一些改善

• 不要单独为继承关系创建新对象；
• 尽量减少运行时方法搜索。

 function Shape() { };
Shape.prototype.name = 'Shape';
Shape.prototype.toStrig = function() {
    rreturn this.name;
  };

function TwoDShape() { };
TwoDShape.prototyoe = Shape.prototype;
TwoDShap.prototype.constructor = TwoDShap;
TwoDShape.prototype.name = '2D shape';


function Triangle(side, height) {
  this.side = side;
  this.height = height;
}

Triangle.prototype = TwoDShape.prototyoe ;
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){
    return  this.side*this.height / 2;
  };

var my = new Triangle(5,6)
my.getArea (); // 25
my.toStrig(); //  Triangle

这种方法有个它的副作用，由于是子对象和父对象是共指用一个对象，所以，当子对象对其原型进行更改，父对象也会随即被更改，甚至所有的继承关系也是如此：

Triangle.prototype.name = 'Triangle';
Shape.prototype.name  // Triangle
//当我们再new一个实例对象时，新对象的属性也是name = 'Triangle'
var  s= new Triangle();
s.name // Triangle

所以这种运用在很多场景中并不适用。

临时构造器法——new F()

基于上面的方法，我们需要某种中介来打破父子原型的这种连锁关系，我们可以创建个F（）空函数，通过new F（）来创建一些不包含父对象属性的对象，同时又可以从父对象prototype属性中继承一切。

 function Shape() { };
Shape.prototype.name = 'Shape';
Shape.prototype.toStrig = function() {
    rreturn this.name;
  };

function TwoDShape() { };
var F = function () { };
F.prototype= Shape.prototype
TwoDShape.prototyoe = new F;
TwoDShap.prototype.constructor = TwoDShap;
TwoDShape.prototype.name = '2D shape';


function Triangle(side, height) {
  this.side = side;
  this.height = height;
}
var F = function () { };
F.prototype= TwoDShape.prototype
Triangle.prototyoe = new F;
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){
    return  this.side*this.height / 2;
  };

var my = new Triangle(5,6)
my.getArea (); // 25
my.toStrig(); //  Triangle

原型属性拷贝法

全属性拷贝法（即浅拷贝法）

深拷贝法

原型继承法

扩展与增强模式

多重继承法

寄生继承法

构造器借用法

构造器与属性拷贝法

第七章：浏览器环境

• BOM（Browser Object Model 即浏览器对象模型）
• DOM （Document Model 即文档对象模型）
• 浏览器事件
• XMLHttpRequest

BOM

BOM是一个用于访问浏览器和计算机屏幕的集合，可通过window全局对象来访问。

• window.navigator:
  用于反应浏览器及其功能信息的对象。
• windows.location:
  属于一个用于存储当前载入页面URL信息的对象，location.href 显示的是完整的URL，location.hostname则是显示相关的域名信息。
• windows.history
  允许我们以有限的权限操作同一个浏览器会话（session）中的已访问的页面，例如：

window.history.length // 查看用户访问了多少的页面，基于隐私，无法获得具体的URL
window.history.forward() // 后退
window.history.back() // 前进
window.history.go() // 实现页面跳转 go(-1),go(-2), 类似back(), go(0) 当前页

• window.frames
  当前页面中所有框架的集合，没有对iframe和frame进行区分。，而且当前页面中是否存在框架，其总是存在的，并指向window对象本身。

• window.secreen
  提供的是浏览器以外的环境信息，例如，secreen.colorDepth属性包含当前显示器的色味。

• window.open()/close()
  open()是一个可让我们打开新浏览器窗口的方法。
  close()则是关闭新窗口的。

• window.moveTo()/resizeTo()

• window.alert()、window.confirm()、window.prompt()

• window.setTimeout()、window.setInterval()、window.clearTimeout()
  setTimeout() 用于在指定多少 毫秒数后执行某段既定代码；
  setInterval() 用于每隔一段毫秒数，执行某段指定代码;
  clearTimeout() 方法用于取消当前的计时器

DOM

是一种将XML或HTML文档解析成树形节点的方法。通过DOM的方法和属性我们可以访问到 页面上任何元素，进行元素的修改、删除、及添加等。

XMLHttpRequest对象

关于XMLHttpRequest对象的用法可分为两部分：

• 发送请求——在这一步中，我们需要完成对XMLHttpRequest 对象的构建
• 处理响应——在这一步中，事件监听器会在服务器的响应信息到达之时收到通知，然后相应的代码就会执行。

发送请求

var xhr = new XMLHttpRequest ();  //创建对象
xhr.onreadystatechage = mycallback; //为该对象设置一个能触发onreadystatechage 事件的监听器
xhr.open('GET' 'somfile.txt' true) // 调用open 方法
xhr.end(' ');

第一个参数指定HTML请求类型（GET、POST、HEAD）
第二参数是请求目标的URL
第三个参数是请求方式是否按照异步的方式进行
send()方法可用发送请求时附带上任何数据集，GET方式类发送方式这里带的是空字符串，因为它的数据都附带在URL里。
带请求发送出去之后，代码就可以将注意力转向其他地方，当收到服务器的响应后，会自动启动回调函数mycallback

处理响应

每一个XML对象中有readyState的属性，一旦我们改变了这个属性的值后，就会触发onreadystatechage 事件，readyState具有以下的状态值：

• 0——未初始化状态
• 1——载入请求状态
• 2——载入完成状态
• 3——请求交互状态
• 4——请求完成状态

当readyState的值为4时意味服务器的响应信息已经返回，开始处理了，这时候还有处理一个HTTP状态码，正常情况下该HTTP状态码是200，该状态码可同过XML对象的status属性来获得。
当这两个条件都满足时我们就可以通过xhr.responseText来访问目标URL中的内容了。

function mycallback(){
  if(xhr.readyState < 4){
    return ; // not ready yet
  }
  if(xhr.status !== 200 ){
    alert('error');
    return ;
  }
  alert(xhr.resposeText)
}

以上额XHR对象属于全局域的，mycallback要根据这个全局对象的readyState、status、responseText属性，但我们异步发送两个请求，或者第二个请求的响应先于第一个，这个方式就不适用了，我们可以封装下这个回调函数到闭包里摆脱对全局对象的依赖。

var xhr = new XMLHttpRequest ();  //创建对象
xhr.onreadystatechage =(function(xhr){
      return function(){
       mycallback(xhr);      
    }
})(xhr);
xhr.open('GET' 'somfile.txt' true) // 调用open 方法
xhr.end(' ');