浅谈JS继承_借用构造函数 & 组合式继承

2019-11-20 09:14:05

字体：大中小

来源：转载

供稿：网友

2.借用构造函数

为解决原型中包含引用类型值所带来的问题，我们使用一种叫做借用构造函数（constructor stealing）的技术（又叫伪造对象或经典继承）。

这种技术的基本思想：在子类构造函数内部调用超类型构造函数。

通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数。

function SuperType(){  this.colors = ["red", "blue", "green"];}function SubType(){  //继承了 SuperType  SuperType.apply(this);}var instance1 = new SubType();instance1.colors.push("black");alert(instance1.colors);  //red,blue,green,blackvar instance2 = new SubType();alert(instance2.colors);  //red,blue,green

在上述例子中，实际上是在新创建的SubType实例（instance1 instance2）的环境下调用了SuperType的构造函数。这样一来，就会在新SubType对象上执行SuperType（）函数中定义的所有对象初始化代码。所以Subtype的每个实例就都会具有自己的colors属性的副本了。

传递参数

对于原型链来讲，借用构造函数有一个很大的优势，即可以在子类型构造函数中想超类型构造函数传递参数。

function SuperType(name){  this.name = name;}function SubType(){  SuperType.call(this, "Bob");  this.age = 18;}var instance1 = new SubType();alert(instance1.age);  //18alert(instance1.name);  //Bob

借用构造函数的问题：

方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的。

3. 组合继承

组合继承（combination inheritance）, 有时候也叫作伪经典继承，指的是将原型链和借用构造函数的技术组合到一起。从而发挥二者之长的一种继承模式。

使用原型链实现对原型属性和方法的继承；

通过借用构造函数来实现对实例属性的继承。

这样，既通过在原型上定义方法实现了函数的复用，又能保证每个实例都有他自己的属性。

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;}　　//继承方法SubType.prototype = new SuperType();SubType.prototype.sayAge = function(){  alert(this.age);}var instance1 = new SubType("Bob", 22);instance1.colors.push("black");alert(instance1.colors);   //red,blue,green,blackinstance1.sayName();     //Bobinstance1.sayAge();     //22var instance2 = new SubType("Alice", 21);alert(instance2.colors);  //red,blue,greeninstance2.sayName();    //Aliceinstance2.sayAge();     //21

在这个例子中， SuperType构造函数定义了两个属性： name和colors。 SuperType的原型定义了一个方法sayName()。

SubType构造函数在调用SuperType构造函数时传入了name参数，定义了他自己的属性age。然后将SuperType的实例赋值给SubType的原型。在该原型上定义了方法sayAge()。

这样一来，就可以让两个不同的SubType实例既分别拥有自己的属性 - 包括colors属性，又可以使用相同的方法。

以上这篇浅谈JS继承_借用构造函数 & 组合式继承就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：json与jsonp知识小结(推荐)

下一篇：JS读写CSS样式的方法汇总