一．继承的原理？
1.原型链继承，原型？
每个构造函数都有一个原型对象，即prototype，原型对象都包含一个指向构造函数的指针，即constructor,而实例都包含一个指向原型对象的内部指针__proto__（火狐浏览器支持测试）
function Func () {
}
Func.prototype instanceof Object //true
Func.prototype.constructor == Func //true
var func = new Func();
func.__prop__ == Func.proptype //true
原型链继承:将父类的实例赋给子类的原型
function Super (){
this.property=‘super‘;
}
Super.prototype.getSuperValue = function (){
return this.property;
}
function Sub (){
this.subProperty=‘sub‘;
}
//继承了Super
Sub.prototype = new Super();
Sub.prototype.getSubValue = function () {
return this.subProperty;
}
var instance = new Sub();
alert(instance.getSuperValue()); // super
//拥有了Super的方法,property属性则位于Sub的原型中,因为property是一个实例属//性,而getSuperValue是一个原型方法.
//此时Sub的原型中有一个指针指向Super的原型
Sub.prototype.__proto__ == Super.prototype //true
//实例有一个指针指向Sub的原型
instance.__proto__ == Sub.prototype//true
如此层层递进形成了一条原型链.
注意:instance.constructor现在指向Super,这是因为Sub的原型指向了另一个对象,
即Super的原型,而这个原型对象的constructor是指向Super的.
instance.constructor == Super //true
2.默认的继承
前面所说的继承链其实还少一环,所有引用类型默认都继承了Object.所以所有函数的原型都是Object的实例,并且而所有函数的constructor属性都是Function
Super.prototype instancof Object //true
Sub.prototype instanceof Object //true
Super.constructor == Function // true
Sub.constructor == Function //true
3.确定原型和实例的关系
第一种使用instanceof操作符,只要用这个操作符来测试 实例与原型链中出现过的构造函数,结果会返回 true
alert(instance instanceof Object);//true
alert(instanceinstanceof SuperType);//true
alert(instance instanceof Sub);//true
第二种方式是使用isPrototype()方法
alert(Object.prototype.isPropertyOf(instance));//true
alert(Super.prototype.isPrototypeOf(instance));//true
alert(Sub.prototype.isPrototypeOf(instance));//true
4.谨慎地定义方法
子类型有时候需要覆盖超类型中的某个方法,或者需要添加超类型中不存在的某个方法.但是不管怎样,给原型添加 方法的代码一定要放在替换原型的语句之后.
function Super() {
this.property = true;
}
Super.prototype.getSuperValue = function(){
return this.property;
}
function Sub(){
this.subProperty = ‘sub‘;
}
//继承了Super
Sub.prototype = new Super();
Sub.prototype.getSubValue = function(){
return this.subProperty;
}
//重写超类型原型中的方法
Sub.prototype.getSuperValue = function(){
return false;
}
var instance = new Sub();
alert(instance.getSuperValue());//false
注意:在通过原型链继承时,不能使用字面量创建原型方法,因为这样做会重写原型链.
function Super() {
this.property = true;
}
Super.prototype.getSuperValue = function(){
return this.property;
}
function Sub(){
this.subProperty = ‘sub‘;
}
//继承了Super
Sub.prototype = new Super();
//使用字面量添加方法,会导致上一行代码无效
Sub.prototype = {
getSubValue: function(){
},
someOtherMethod:function(){
}
};
var instance =new Sub();
alert(instance.getSuperValue()); //TypeError: instance.getSuperValue is not a function
由于现在的原型包含的是一个Object的实例,而非Super的实例,因此 我们设想中原型链已经被切断--------Sub和Super已经没有关系了.
5.原型链的问题
a. 构造函数中this定义的属性会使得每个实例都有独立的该属性,因此我们通过this关键字来定义实例变量,而原型中的属性的值会被所有实例共享,也就是通过实例去修改构造函数中原型的属性的值,会导致所有实例中该属性的值也被更改.
function Super(){
this.colors = [‘red‘];
}
function Sub(){
}
//继承
Sub.prototype = new Super();
var instance1 = new Sub();
instance.colors.push(‘black‘);
alert(instance.colors); // red,black
var instance2 = new Sub();
alert(instance.colors);//red,black
b.在创建子类型的实例时,不能向超类型的构造函数中传递参数.实际上应该是说没有办法在不影响所有实例的情况下,给超类型传递参数.因此,鉴于这些问题,实践中很少单独使用原型链.
6.借用构造函数
为了解决原型链继承的问题,开发人员使用了一种叫做借用构造函数的技术,思想就是在子类型的构造函数的内部调用超类型构造函数,因为函数只不过是在特定环境中执行代码的对象,因此可以通过apply()和call()方法也可以在(将来)新创建的对象上执行构造函数.
function Super(){
this.colors = [‘red‘];
}
function Sub(){
//继承
Super.call(this);
}
var instance1 = new Sub();
instance1.colors.push(‘black‘);
alert(instance1.colors); // red,black
var instance2 = new Sub();
alert(instance2.colors);//red
a.传递参数
相对于原型链而言,借用构造函数有个很大的优势,即可以再子类型的构造函数中向超类型构造函数传递参数.
function Super(name){
this.name = name;
}
function Sub(){
//继承并传递参数
Super.call(this,‘sub‘);
this.age = 23;
}
var instance = new Sub();
alert(instance.name);//‘sub‘‘
alert(instance.age);//23
b.借用构造函数的问题,如果仅仅使用借用构造函数,也无法避免构造函数模式存在的问题-------方法都在够着函数中定义,因此复用无从谈起,,并且原型中定义的函数在子类中也是不可见的.
7.组合继承
组合继承也叫做伪经典继承,思路就是将原型链和借用构造函数结合,使用原型链实现对原型属性和方法的继承,而 通过构造函数来实现实例属性的继承.这样既通过原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性.
function Super(name){
this.name = name;
this.colors = [‘red‘];
}
Super.prototype.sayName = function(){
alert(this.name);
};
function Sub(name,age){
//继承属性
Super.call(this,name);
this.age = age;
}
//继承方法
Sub.prototype = new Super();
Sub.prototype.constructor = Sub;
Sub.prototype.sayAge = function(){
alert(this.age);
}
var instance1 = new Sub(‘First‘,23);
instance1.colors.push(‘black‘);
alert(instance1.colors); //red,black
instance1.sayName(); // First
instance1.sayAge(); //23
var instance2 = new Sub(‘Second‘,24);
alert(instance2.colors); // red
instance2.sayName(); // Second
instance2.sayAge(); //24
组合继承避免了原型链和借用构造函数的缺陷,融合了他们的优点,成为javascript中最常用的继承模式.
8.原型式继承
这种方式的思想是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型,这种方法并没有严格意义上的构造函数.
function object(o){
function F(){ }
F.prototype = o;
return new F();
}
object函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例.从本质上看,object对传入其中的对象执行了一次浅复制.
var person = {
name:‘Jack‘,
friends: [‘Rose‘]
};
var anotherPerson = object(person);
anotherPerson.name = ‘LiangShanBo‘ ;
anotherPerson.friends.push(‘ZhuYinTai‘);
var yetAnotherPerson = object(person);
yetAnotherPerson.name = ‘Romeo‘;
yetAnotherPerson.friends.push(‘Juliet‘);
alert(person.friends);//Rose,zhuYinTai,Juliet
ECMAScript5新增了Object.create()方法规范化了原型式继承.这个方法接受两个参数:一个作为新对象原型的对象(可选),另一个为新对象定义额外属性对象.在传入一个参数的情况下和object方法行为相同.
var person = {
name: ‘Jack‘,
friends: [‘Rose‘]
}
var anotherPerson = Object.create(person);
anotherPerson.name = ‘LiangShanBo‘;
anotherPerson.friends.push(‘ZhuYinTai‘);
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = ‘Romeo‘;
yetAnotherPerson.friends.push(‘Juliet‘);
alert(person.friends) //Rose,ZhuYinTai,Juliet
Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同:每个属性都是 通过自己的描述定义的.以这种方式指定的任何属性 都会覆盖原型 对象上的同名属性.
var Person = {
name: ‘Jack‘,
friends: [‘Rose‘]
};
var anotherPerson = Object.create(person,{
name: {
value: ‘LiangShanBo‘
}
});
alert(anotherPerson.name);// LiangShanBo
在没有必要兴师动众地创建构造函数的,而只想让要一个对象与另一个对象保持类似的情况下,原型式继承十分有用.
但这种方式跟原型链继承一样,包含引用类型值的属性始终会共享相应的值.
9.寄生式继承
与原型式继承紧密相关的一种思路,与寄生构造函数和工程模式类似,即创建了一个仅用于封装继承过程的函数,该函数在内部以某种方式增强函数,最后再像真正地是它做了 所有的工作一样返回对象.
function createAnother(orignal){
var clone = object(orignal);//通过调用函数创建一个新对象
clone.sayHi = function(){ //以某种方式增强这个对象
alert(‘hi‘);
};
return clone;
}
//使用createAnnother()函数
var person = {
name: ‘Jack‘,
friends: [‘Rose‘]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();//hi
这个例子中基于person返回一个新对象-------anotherPerson.新对象不仅具有哦person的所有属性和方法,而且还有自己的sayHi()方法.
在主要考虑对象而不是自定义类型和构造函数的情况下,寄生继承也是一种有用的模式.例子中的object()函数不是必须的,任何能够返回新对象的函数都适用此模式.
需要注意的是:使用这种方式为对象添加函数,会由于做不到函数复用而降低效率,这点与构造函数模式类似.
10.寄生组合式继承
组合式继承时javascript最常用的继承模式,但是也有自己的不足:那就是无论如何使用的时候都会调用两次超类型:一次是在 创建子类型原型的时候,另一次是在子类型构造函数内部.再来看一下组合继承
function Super(name){
this.name = name;
this.colors = [‘red‘];
}
Super.prototype.sayName = function(){
alert(this.name);
};
function Sub(name,age){
//继承属性
Super.call(this,name); //第二次调用Super
this.age = age;
}
//继承方法
Sub.prototype = new Super(); //第一次调用Super()
Sub.prototype.constructor = Sub;
Sub.prototype.sayAge = function(){
alert(this.age);
}
还好我们找到了解决这个问题的办法,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法.思路就是:不必为了指定子类型的原型而调用超类型的构造函数
,我们所需要的无非就是超类型的一个 副本而已,本质上就是使用寄生式继承来继承 超类型的原型,然后再将结果指定给子类型的原型.
function inheritPrototype(sub,super){
var prototype = Object(super.prototype); //创建对象
prototype.constructor = subType; //增强类型
subType.prototype = prototype; 指定对象
}
//最终的模式
function Super(name){
this.name = name;
this.colors = [‘red‘];
}
Super.prototype.sayName = function(){
alert(this.name);
};
function Sub(name,age){
//继承属性
Super.call(this,name); //第二次调用Super
this.age = age;
}
inheritPrototype(Sub,Super);
Sub.prototype.sayAge = function(){
alert(this.age);
}
寄生组合式继承是引用类型最理想的继承范式.