JavaScript继承
默认的继承方法：通过原型来实现继承关系链
function Shape() {
this.name = 'Shape';
this.toString = function () {
return 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;
};
}
继承的代码：
TwoDShape.prototype = new Shape();
Triangle.prototype = new TwoDShape();
对对象的prototype属性进行完全替换时（不同于向prototype指向的对象添加属性，有可能会对对象的constructor属性产生一定的副作用），
所以对这些对象的constructor属性进行相应的重置：
TwoDShape.prototype.constructor = TwoDShape;
Triangle.prototype.constructor = Triangle;
测试一下实现的内容：
var my = new Triangle(5, 10);
my.getArea();
--25
my.toString();
--"Triangle"
在JavaScript引擎在my.toString()被调用时发生的事情。
1.会遍历my对象中的所有属性，没找到一个叫toString()的方法。
2.再去查看my.__proto__所指向的对象，该对象应该是在继承关系构建中由new ToDShape()所创建的实体
3.JS在遍历ToDShape实体的过程中依然不会找到toString方法，然后又继续检查该实体的__proto__属性，该__proto__属性所指向的实体由new Shape()所创建
4.在new Shape()所创建的实体中找到了toString()方法
5.该方法就会在my对象中被调用，并且其this指向了my
my.constructor === Triangle; --true
通过instanceof，可以验证my对象同时是上述三个构造器的实例：
my instanceof Shape;
--true
my instanceof TwoDShape;
--true
my instanceof Triangle;
--true
my instanceof Array; --false
以my参数调用这些构造器原型的isPropertypeOf()方法时，结果也是如此：
Shape.prototype.isPrototypeOf(my); --true TwoDShape.prototype.isPrototypeOf(my); --true Triangle.prototype.isPrototypeOf(my); --true String.prototype.isPrototypeOf(my); --false
用其他两个构造器来创建对象，用new TwoDShape()所创建的对象也可以获得继承自Shape()的toString()的方法。
var td = new TwoDShape();
td.constructor === TwoDShape;
--true
td.toString(); "2D Shape"
var s = new Shape();
s.constructor === Shape;
--true
2.将共享属性迁移到原型中去：
用某一个构造器创建对象时，其属性就会被添加到this中去，被添加的属性实际上不会随着实体改变，这种做法没有什么效率。
function Shape() {
this.name = 'Shape';
}
用new Shape()创建的每个实体都会拥有一个全新的name属性，并在内存中拥有自己的独立存储空间，可以将name属性添加到原型上去，所有实体就可以共享这个属性
function Shape() { }
Shape.prototype.name = 'Shape';
将所有的方法和符合条件的属性添加到原型对象中，Shape()和TwoDShape()而言，所有东西都是可以共享的
function Shape() {
}
Shape.prototype.name = 'Shape';
Shape.prototype.toString = function () {
return this.name;
};
function TwoDShape() { }
TwoDShape.prototype = new Shape();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = '2D shape';
function Triangle(side, height) {
this.side = side;
this.height = height;
}
Triangle.prototype = new TwoDShape();
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function () {
return this.side * this.height / 2;
}
var my = new Triangle(5, 10);
my.getArea(); --25 my.toString(); --"Triangle"
也可以通过hasOwnPrototype()属性来明确对象的自身属性和原型属性
my.hasOwnProperty('side');
--true
my.hasOwnProperty('name');
false
TwoDShape.prototype.isPrototypeOf(my); --true
my instanceof Shape; --true
3.只继承与原型：
1.不要单独为继承关系创建新对象
2.尽量减少运行时的方法搜索
function Shape() { }
Shape.prototype.name = 'shape';
Shape.prototype.toString = function () {
return this.name;
};
function TwoDShape() { }
TwoDShape.prototype = Shape.prototype;
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = '2D Shape';
function Triangle(side, height) {
this.side = side;
this.height = height;
}
Triangle.prototype = TwoDShape.prototype;
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function () {
return this.side * this.height / 2;
}
var my = new Triangle(5, 10);
my.getArea(); - -25 my.toString(); --"Triangle"
以上代码采用了引用传递而不是值传递。
简单的拷贝原型在效率上来说固然好一些，但有他的副作用，子对象和父对象指向同一个对象，一旦子对象对其原型就行修改，父对象也会随即被改变，如：
Triangle.prototype.name = 'Triangle';
var s = new Shape();
s.name;
--"Triangle"
效率高，应用场景中并不适用
二：临时构造器——new F()
解决上述问题就必须利用中介来打破这种连锁关系，可以用一个临时构造器函数来充当中介，创建一个空函数F(),将其原型设置为父级构造器。
function Shape() {}
Shape.prototype.name = 'Shape';
Shape.prototype.toString = function () {
return this.name;
};
function TwoDShape() { }
var F=function(){};
F.prototype = Shape.prototype;
TwoDShape.prototype = new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = '2D shape';
function Triangle(side, height) {
this.side = side;
this.height = height;
}
var F = function () { }
F.prototype = TwoDShape.prototype;
Triangle.prototype = 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, 10);
my.getArea();
--25
my.toString(); --"Triangle"
通过这种方法，我们就可以保持住原型链：
my.__proto__ === Triangle.prototype; --true my.__proto__.constructor == Triangle; --true my.__proto__.__proto__ === TwoDShape.prototype; --true my.__proto__.__proto__.__proto__.constructor === Shape; --true
并且父对象的属性不会被子对象所覆盖：
var s = new Shape();
s.name;
--"Shape"
"I am a " + new TwoDShape(); --"I am a 2D shape"
将所有要共享的属性与方法添加到原型中，然后只围绕原型构建继承关系。
3.uber--子对象访问父对象的方式（指向父级原型对象）
function Shape() { }
Shape.prototype.name = 'shape';
Shape.prototype.toString = function () {
//var const1 = this.constructor;
return this.constructor.uber
? this.constructor.uber.toString() + ', ' + this.name
: this.name;
};
function TwoDShape() { }
var F = function () { };
F.prototype = Shape.prototype;
TwoDShape.prototype = new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.uber = Shape.prototype;
TwoDShape.prototype.name = '2D shape';
function Triangle(side, height) {
this.side = side;
this.height = height;
}
var F = function () { };
F.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.uber = TwoDShape.prototype;
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function () {
return thi.side * this.height / 2;
};
var my = new Triangle(5, 10);
my.toString();
--"shape, 2D shape, Triangle"
增加以下内容：
1.将uber属性设置成指向其父级原型的引用
2.对toString()方法进行了更新
检查对象中是否存在this.constructor.uber属性，如果存在，就先调用该属性的toString方法，由于this.constructor本身是一个函数，而this.constructor.uber则是指向当前对象父级原型的引用。
当调用Triangle实体的toString()方法时，其原型链上所用的toString()都会被调用。
4.将继承部分封装成函数：
function extend(Child, Perent) {
var F = function () { };
F.prototype = Perent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Perent.prototype;
}
function Shape() { };
Shape.prototype.name = 'Shape';
Shape.prototype.toString = function () {
return this.constructor.uber
? this.constructor.uber.toString() + ', ' + this.name
: this.name;
};
function TwoDShape() { };
extend(TwoDShape, Shape);
TwoDShape.prototype.name = '2D shape';
function Triangle(side, height) {
this.side = side;
this.height = height;
}
extend(Triangle, TwoDShape);
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function () {
return this.side * this.height / 2;
}
new Triangle().toString();
--"Shape, 2D shape, Triangle"
6.属性拷贝
将父对象的属性拷贝给子对象，
function extend2(Child, Parent) {
var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
}
这种方法仅适用于只包含基本数据类型的对象，所有的对象类型(包括函数与数组)都是不可复制的，他们只支持引用传递。
Shape的原型中包含了一个基本类型属性name，和一个非基本类型属性---toString()方法
var Shape = function () { };
var TwoDShape = function () { };
Shape.prototype.name = 'shape';
Shape.prototype.toString = function () {
return this.uber
? this.uber.toString() + ', ' + this.name
: this.name;
};
通过extend()方法实现继承，name属性既不会是TwoDShape()实例的属性，也不会成为其原型对象的属性，但是子对象依然可以通过继承方式来访问该属性
extend(TwoDShape, Shape);
var td = new TwoDShape();
td.name;
--"shape"
TwoDShape.prototype.name; --"shape"
td.__proto__.name; --"shape"
td.hasOwnProperty('name');
--false
td.__proto__.hasOwnProperty('name');
--false
继承通过extend2()方法来实现，TwoDShape()的原型中就会拷贝获得属于自己的name属性，同样也会拷贝toString()方法，但这只是一个函数引用，函数本身并没有被再次创建
extend2(TwoDShape, Shape);
var td = new TwoDShape();
td.__proto__.hasOwnProperty('name');
--true
td.__proto__.hasOwnProperty('toString');
--true
td.__proto__.toString === Shape.prototype.toString; --true
extend2()方法的效率要低于extend()方法，主要是前者对部分原型属性进行了重建
td.toString(); --"shape, shape"
TwoDShape并没有重新定义name属性，所以打印了两个Shape，可以在任何时候重新定义name属性，
TwoDShape.prototype.name = "2D shape";
td.toString();
--"shape, 2D shape"
6.小心处理引用拷贝
对象类型(包括函数与数组)通常都是以引用形式来进行拷贝的，会导致一些预期不同的结果：
function Papa() { }
function Wee() { }
Papa.prototype.name = 'Bear';
Papa.prototype.owns = ["porridge", "chair", "bed"];
让Wee继承Papa(通过extend()或extend2()来实现)：
extend2(Wee, Papa);
即Wee的原型继承了Papa的原型属性，并将其变成了自身属性
Wee.prototype.hasOwnProperty('name');
---true
Wee.prototype.hasOwnProperty('owns');
---true
name属于基本类型属性，创建的是一份全新的拷贝，owns属性是一个数组对象，它执行的引用拷贝。
Wee.prototype.owns; -- ["porridge", "chair", "bed"] Wee.prototype.owns === Papa.prototype.owns; --true
改变Wee中的name属性，不会对Papa产生影响：
Wee.prototype.name += ', Little Bear'; --"Bear, Little Bear"
Papa.prototype.name; --"Bear"
如果改变的是Wee的owns属性，Papa就会受到影响，这两个属性在内存中引用的是同一个数组：
--pop() 方法用于删除并返回数组的最后一个元素。
Wee.prototype.owns.pop(); --"bed"
Papa.prototype.owns; --["porridge", "chair"]
用另一个对象对Wee的owns属性进行完全重写(不是修改现有属性)，这种情况下，Papa的owns属性将会继续引用原有对象，而Wee的owns属性指向了新对象。
Wee.prototype.owns = ["empty bowl", "broken chair"];
Papa.prototype.owns.push('bed');
Papa.prototype.owns;
-- ["porridge", "chair", "bed"]
7.对象之间的继承
在对象之间进行直接属性拷贝
用var o={}语句创建一个没有任何私有属性的“空”对象作为画板，逐步为其添加属性，将现有对象的属性全部拷贝过来
function extendCopy(p) {
var c = {};
for (var i in p ) {
c[i] = p[i];
}
var twoDee = extendCopy(shape);
twoDee.name = '2D shape';
twoDee.toString = function () {
return this.uber.toString() + ', ' + this.name;
};
c.uber = p; return c; }
创建一个基本对象：
var shape = {
name: 'Shape',
toString: function () {
return this.name;
}
};
根据就对象来创建一个新对象，调用extendCopy()函数，返回一个新对象，继续对这个新对象进行扩展，添加额外的功能
var twoDee = extendCopy(shape);
twoDee.name = '2D shape';
twoDee.toString = function () {
return this.uber.toString() + ', ' + this.name;
};
让triangle对象继承一个2D图形对象。
var triangle = extendCopy(twoDee);
triangle.name = 'Triangle';
triangle.getArea = function () {
return this.side * this.height / 2;
};
使用triangle：
triangle.side = 5;
triangle.height = 10;
triangle.getArea();
--25
triangle.toString();
---"Shape, 2D shape, Triangle"
8.深拷贝
深拷贝的实现方式与浅拷贝基本相同，需要通过遍历对象的属性来进行拷贝操作，在遇到一个对象引用性的属性时，需要再次对其调用深拷贝函数。
当对象被拷贝时，实际上拷贝的只是该对象在内存中的位置指针----浅拷贝（如果我们修改了拷贝对象，就等于修改了原对象）
function deepCopy(p, c) {
c = c || {};
for (var i in p) {
if (p.hasOwnProperty(i)) {
if (typeof p[i] === 'object') {
c[i] = Array.isArray(p[i]) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
}
return c;
}
//创建一个对象，包含数组和子对象
var parent = {
numbers: [1, 2, 3],
letters: ['a', 'b', 'c'],
obj: {
prop: 1
},
bool: true
};
在深拷贝中，对拷贝对象的numbers属性进行更改不会对原对象产生影响
var mydeep = deepCopy(parent);
var myshallow = extendCopy(parent);
mydeep.numbers.push(4, 5, 6);
mydeep.numbers; ---- [1, 2, 3, 4, 5, 6]
parent.numbers; ---- [1, 2, 3]
myshallow.numbers.push(10); --4
myshallow.numbers; -- [1, 2, 3, 10]
parent.numbers; -- [1, 2, 3, 10]
mydeep.numbers; --- [1, 2, 3, 4, 5, 6]
push：方法将一个或多个元素添加到数组的末尾,并返回新数组的长度
使用deepCopy()函数注意的地方：
1.在拷贝每个属性之前，使用hasOwnProperty()来确认不会误拷贝不需要的继承属性
2.区分Array对象和普通Object对象相当繁琐，ES5实现了Array.isArray()函数。
if (Array.isArray != "function") {
Array.isArray = function (candidate) {
return Object.prototype.toString.call(candidate) === '[Object Array]';
};
}
9.Object()
基于这种在对象之间直接构建构建继承关系的理念，即可以用Object()函数来接收父对象，并返回一个以对象为原型的新对象
