js中的继承(一):几大继承方法

js中的继承

ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

原型链的基本概念

每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型的对象的内部指针。假如让原型对象等于另一个类型的实例,那么,此时的原型对象将包含一个指向另一个原型的指针,而另一个原型也包含着指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。这就是所谓原型链的基本概念。

实现原型链的一种基本模式,举例:

//创建一个构造函数SuperType,它有一个自己的属性
function SuperType(){
	this.property=true;
}
//它还有一个自己的方法
SuperType.prototype.getSuperValue=function(){
	return this.property;
}
//创建另一个构造函数SubType,它有一个自己的属性
function SubType(){
	this.subproperty=false;
}
//继承了SuperType的属性和方法,增加了指向SuperType.prototype的指针
SubType.prototype=new SuperType();
//再创建一个自己的方法
SubType.prototype.getSubValue=function(){
	return this.subproperty;
};
//生成一个subType实例
var instance=new SubType();
console.log(instance.getSuperValue());//true

上例中的继承是通过创建SuperType的实例,并将该实例赋给SubType.prototype实现的。实现的本质是重写原型对象,代之以一个新类型的实例。换句话说,原本存在于SuperType的实例中的所有属性和方法,现在也存在于SubType.protoType中了。在确立了继承关系后,我们给SubType.prototype添加了一个方法,这样就在继承了SuperType的属性和方法的基础上又添加了一个新方法(如果先添加方法,后继承,那么方法会被继承的属性方法覆盖掉,实际上这个新方法并没有添加上)。

这个例子中的实例以及构造函数和原型之间的关系如图所示:

由于在上面的代码中,没有使用SubType默认的原型,而是给它换了一个新原型,这个新原型就是SuperType的实例。于是,新原型不仅具有作为一个SuperType的实例所拥有的全部属性和方法,而且其内部还有一个指针,指向了SuperType的原型。最终的结果就是这样的:instance指向SubType的原型,SubType的原型又指向SuperType的原型。

注意:getSuperValue()方法仍然在SuperType.prototype中,但property则位于SubType.prototype中。这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例,那么property当然就位于该实例中了。此外,还要注意,instance.constructor属性现在指向的是SuperType,这是因为原来的SubType的原型指向了另一个对象SuperType的原型,而这个原型对象的constructor属性指向的是SuperType.

扩展后的原型搜索机制

当以读取模式访问一个实例属性时,首先会在实例中搜索该属性。如果没有找到该属性,则会继续搜索实例的原型。在通过原型链实现继承的情况下,搜索过程就得意沿着原型链继续向上。

如:在上例调用instance.getSuperValue()会经历三个搜索步骤:

1)搜索实例;

2)搜索SubType.protoype;

3)搜索SuperType.prototype,最后一步才会找到该方法。

再找不到属性和方法的情况下,搜索过程总是要一环一环的前行到原型链末端才会停下来。

1.完整的原型链

前面例子中展示的原型链还少一环。

所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。我们知道的,所有引用类型默认都继承了Object,而这个继承就是通过原型链实现的。这也正是所有自定义类型都会继承toString()、valueOf()等默认方法的根本原因。

所以,我们说上面例子展示的原型链中还应该包括另外一个继承层次,即Object的原型。

当调用instance.toString()时,实际上调用的是保存在Object.prototype中的那个方法。

2.确定原型和实例的关系

两种方式:

instanceof操作符:只要用这个操作符来测试实例与原型中出现过的构造函数,结果就会返回true.

console.log(instance instanceof Object);//true
console.log(instance instanceof SuperType);//true
console.log(instance instanceof SubType);//true

isPrototypeOf()方法:同样,只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。

console.log(Object.prototype.isPrototypeOf(instance));//true
console.log(SuperType.prototype.isPrototypeOf(instance));//true
console.log(SubType.prototype.isPrototypeOf(instance));//true

3.谨慎地定义方法

1)子类型有时候需要覆盖超类型中的某个方法,或者需要添加超类型中不存在的某个方法。但不管怎样,给原型添加方法的代码一定要放在替换原型的语句之后。举例:

function SuperType(){
	this.property=true;
}
SuperType.prototype.getSuperValue=function(){
	return this.property;
}
function SubType(){
	this.subproperty=false;
}
//继承了SuperType的属性和方法,增加了指向SuperType.prototype的指针
SubType.prototype=new SuperType();
//添加新方法
SubType.prototype.getSubValue=function(){
	return this.subproperty;
};
//重写超类型中的方法
SubType.prototype.getSuperValue=function(){
	return this.subproperty;
}
var instance=new SubType();
console.log(instance.getSubValue());//false
console.log(instance.getSuperValue());//false

在通过原型链实现继承是,不能使用对象字面量创建原型方法。因为这样做就会重写原型链。

function SuperType(){
	this.property=true;
}
SuperType.prototype.getSuperValue=function(){
	return this.property;
};
function SubType(){
	this.subproperty=false;
}
//继承了SuperType
SubType.prototype=new SuperType();
//使用字面量添加新方法
SubType.prototype={
	getSubValue:function(){
		return this.subproperty;
	},
	someOtherMethod:function(){
		return false;
	}
};
//生成一个subType实例
var instance=new SubType();
console.log(instance.getSuperValue());//error!

由于现在的原型包含的是一个Object的实例,而非SuperType的实例,因此我们设想中的原型链已经被切断——SubType和SuperType之间已经没有关系了。

4.原型链的问题

function SuperType(){
	this.colors=["red","blue","green"];
}
function SubType(){}

//继承了SuperType
SubType.prototype=new SuperType();

var instance1=new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'blue', 'green', 'black' ]
var instance2=new SubType();
console.log(instance2.colors);//[ 'red', 'blue', 'green', 'black' ]

这个例子中的SuperType构造函数定义了一个colors属性,该属性包含一个数组(引用类型值)。SuperType的每个实例都会有各自包含自己数组的colors属性。当SubType通过原型链继承了SuperType后,SubType.prototype就变成了SuperType的一个实例,因此它也拥有了一个它自己的colors属性——就跟专门创建了一个subType.prototype.colors属性一样。但结果是,所有实例都会共享这一个colors属性。

原型链的第二个问题:在创建子类型的实例时,不能向超类型的构造函数中传递参数。应该说是没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。因此,实践中很少会单独使用原型链。

借用构造函数

基本思想:在子类型构造函数的内部调用超类型构造函数。

function SuperType(){
	this.colors=["red","blue","green"];
}
function SubType(){
	SuperType.call(this);
}
var instance1=new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'blue', 'green', 'black' ]
var instance2=new SubType();
console.log(instance2.colors);//[ 'red', 'blue', 'green' ]

每个实例都会具有自己的colors属性的副本。

1.传递参数

可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name){
	this.name=name;
}
function SubType(){
	//继承了SuperType,同时还传递了参数
	SuperType.call(this,"Nicholas");
	//实例属性
	this.age=29;
}
var instance1=new SubType();
console.log(instance1.name);//Nicholas
console.log(instance1.age);//29

为了确保SuperType构造函数不会重写子类型的属性,可以在调用超类型构造函数后,再添加应该在子类型中定义的属性。

2.借用构造函数的问题

方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。考虑到这些问题,借用构造函数的技术也是很少单独使用的。

组合继承

将原型链和借用构造函数的技术组合到一块,思路是:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

function SuperType(name){
	this.name=name;
	this.colors=["red","blue","green"];
}
SuperType.prototype.sayName=function(){
	console.log(this.name);
};
function SubType(name,age){
	SuperType.call(this,name);
	this.age=age;
}
SubType.prototype=new SuperType();
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
	console.log(this.age);
};
var instance1=new SubType("Nicholas",29);
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'blue', 'green', 'black' ]
instance1.sayName();//Nicholas
instance1.sayAge();//29

var instance2=new SubType("Nicholas",29);
console.log(instance2.colors);//[ 'red', 'blue', 'green' ]
instance2.sayName();//Nicholas
instance2.sayAge();//29

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为JavaScript中最常用的继承模式。而且,instanceof和isPrototype()也能够用于识别基于组合继承创建的对象。

原型式继承

借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

function object(o){
    function F(){}
        F.prototype=o;
        return new F();
   
}

在object函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时性类型的新实例。从本质上来讲,object()对传入其中的函数执行了一次浅复制。

var person={
    name:"Nicholas",
    friends:["Shelly","Court","Van"]
};
var anotherPerson=object(person);
anotherPerson.name="Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson=object(person);
yetAnotherPerson.name="Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//[ 'Shelly', 'Court', 'Van', 'Rob', 'Barbie' ]

ECMAScript5通过新增Object.create()方法规范化了原型式继承。这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下,Object.create()与object()方法的行为相同。

 var person = {
            name: "Nicholas",
            friends: ["Shelby", "Court", "Van"]
        };
        
        var anotherPerson = Object.create(person);
        anotherPerson.name = "Greg";
        anotherPerson.friends.push("Rob");
        
        var yetAnotherPerson = Object.create(person);
        yetAnotherPerson.name = "Linda";
        yetAnotherPerson.friends.push("Barbie");
        
        console.log(person.friends);   //"Shelby,Court,Van,Rob,Barbie"
 		

Object.create()方法的第二个参数与Object.defineProperties()方法的第二参数相同:每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。例如:

var person = {
            name: "Nicholas",
            friends: ["Shelby", "Court", "Van"]
        };
                           
        var anotherPerson = Object.create(person, {
            name: {
                value: "Greg"
            }
        });
        
        console.log(anotherPerson.name);  //"Greg"

在没有必要兴师动众的创建函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。不过,包含引用类型值的属性始终都会共享相应的值。

寄生式继承

与寄生构造函数和工厂模式类似,创建一个用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象。以下代码示范了寄生式继承模式。

function createAnother(original){
    var clone=object(original);//通过调用函数创建一个新对象
    clone.sayHi=function(){   //以某种方式来增强这个对象
        console.log("hi");
    };
    return clone;//返回这个对象
}
var person={
    name:"Nicholas",
    friends:["Shelly","Court","Van"]
};
var anotherPerson=createAnother(person);
anotherPerson.sayHi();//"hi"

在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。

寄生组合式继承

组合继承的优化版:组合继承会调用两次超类型,生成相同的实例属性和原型属性。

function SuperType(name){
	this.name=name;
	this.colors=["red","blue","green"];
}
SuperType.prototype.sayName=function(){
	console.log(this.name);
};
function SubType(name,age){
	SuperType.call(this,name);
	this.age=age;
}
SubType.prototype=new SuperType();//第一次调用 原型中生成name、colors属性
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
	console.log(this.age);
};
var instance1=new SubType("Nicholas",29);//第二次调用,在实例中生成name、colors属性,覆盖原型中的属性
instance1.colors.push("black");
console.log(instance1.colors);//[ 'red', 'blue', 'green', 'black' ]
instance1.sayName();//Nicholas
instance1.sayAge();//29

var instance2=new SubType("Nicholas",29);
console.log(instance2.colors);//[ 'red', 'blue', 'green' ]
instance2.sayName();//Nicholas
instance2.sayAge();//29

通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。寄生组合式继承优化版:

  		function object(o){
            function F(){}
            F.prototype = o;
            return new F();
        }
    
        function inheritPrototype(subType, superType){
            var prototype = object(superType.prototype);   //创建对象
            prototype.constructor = subType;               //增强对象
            subType.prototype = prototype;                 //指定对象
        }
                                
        function SuperType(name){
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }
        
        SuperType.prototype.sayName = function(){
            alert(this.name);
        };

        function SubType(name, age){  
            SuperType.call(this, name);
            
            this.age = age;
        }

        inheritPrototype(SubType, SuperType);
        
        SubType.prototype.sayAge = function(){
            alert(this.age);
        };
        
        var instance1 = new SubType("Nicholas", 29);
        instance1.colors.push("black");
        alert(instance1.colors);  //"red,blue,green,black"
        instance1.sayName();      //"Nicholas";
        instance1.sayAge();       //29
        
       
        var instance2 = new SubType("Greg", 27);
        alert(instance2.colors);  //"red,blue,green"
        instance2.sayName();      //"Greg";
        instance2.sayAge();       //27

开发人员普遍认为寄生组合式继承是引用类型的最理想的继承范式。

猜你喜欢

转载自blog.csdn.net/yangyuqingabc/article/details/82996957