第六章：继承
原型链方法(防传统)
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(' ');
网友评论