js 继承 原型链

Posted 2021-01-09 你今天学习了吗

这里先说基于原型链实现的继承。那首先就得明白什么是原型链了；

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

那么，假如我们让原型对象等于另一个类型的实例，此时的原型对象将包含指向另一个原型对象的指针，相应地，另一个原型对象也包含着指向另一个构造函数的指针。

假如另一个原型又是另一个类型的实例，那么上述关系依然成立。层层递进，就成一条链了。

实现原型链的基本模式:

function SuperType() {

　　this.property = true;

}

SuperType.prototype.getSuperValue = function() {

　　return this.property;

}

function SubType() {

　　this.subproperty = false;

}

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

SubType.prototype.getSubValue = function() {

　　return this.subproperty;

}

var instance = new SubType();

alert(instance.getSuperValue); // true

上述SubType通过重写原型对象的方式继承了SuperType，所以原来位于SuperType里的方法，现在也位于SubType里了，我们没有使用SubType默认提供的原型，而是给它换了一个新原型。这个新原型就是SuperType的实例。

于是，新原型不仅有作为SuperType实例所有的属性和方法，内部还有一个指针，指向了SuperType的原型。

从而，instance指向SubType的原型，SubType的原型又指向SuperType的原型；getSuperValue()的方法还是在SuperType.prototype中，但property则位于SubType.prototype中，因为property是一个实例属性，而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例，那么property当然位于该实例中了

此外，instance.constructor现在指向的是SuperType了，因为原来SubType.prototype指向了SuperType的原型，而这个原型对象的constructor属性指向的是SuperType

 

默认的原型

我们知道，所有的引用类型默认都继承了Object，而这个继承也是原型链实现的。所有的函数的默认原型都是Object的实例，因此默认原型里面都会包含一个指针，指向Object.prototype

这也是所有自定义类型都会继承toString(),valueof()等默认方法的根本原因

 

原型和实例的关系

alert(isntance instanceof Object) ; // true

alert(isntance instanceof SuperType);  // true

alert(isntance instanceof SubType) ; // true

alert(Object.prototype.isPrototypeOf(instance));  // true

alert(SuperType.prototype.isPrototypeOf(instance)); // true

alert(SubType.prototype.isPrototypeOf(instance)); // true

 

通过原型链实现继承，不能使用字面量对象创建原型方法，那样会重写原型链，切断原来原型与实例之间的联系

原型链存在的问题：

（1）最主要的问题是来自包含引用类型值的原因

举例：

function SuperType() {

　　this.colors = [‘red‘, ‘yellow‘, ‘blue‘];

}

function SubType() {

}

SubType.prototype = new SuperType();

var instance1 = new SubType();

instance1.colors.push(‘black‘);

var instance2 = new SubType();

alert(instance1.colors);  // ‘red,yellow,blue,black‘

alert(instance2.colors); // ‘red,yellow,blue,black‘

SuperType的每个实例都会包含各自的colors属性，当SubType通过原型链继承之后，SubType.prototype也包含了一个colors属性，为所有实例所共享，所有修改instance1，会反映到instance2

（2）另一个问题：不能向超类型的构造函数中传递参数

解决办法：

1.借用构造函数（经典继承）

function SuperType () {

　　this.colors = [‘red‘, ‘blue‘, ‘green‘];

}

function SubType() {

　　SuperType.call(this)

}

var instance1 = new SubType();

instance1.colors.push(‘black‘);

alert(instance1.colors); // "red,blue,green,black"

var instance2 = new SubType();

alert(instance2.colors) // "red,blue,green"

代码红色部分借调了超类型的构造函数，通过使用call()方法，我们实际上是在（未来将要）新创建的SubType实例的环境下调用了SuperType构造函数。就会在新SubType对象上执行SuperType函数中定义的所有对象初始化代码

优势： 传递参数，可以在子类型构造函数中向超类型构造函数传递参数

function SuperType (name) {

　　this.name = name;

}

function SubType () {

　　SuperType.call (this, ‘bob‘);  //继承SuperType，同时传递参数

　　this.age = 29;  //实例属性

}

var instance = new SubType();

alert(instance.name); // ‘bob‘

alert(instance.age);  //29

问题：方法都在构造函数中定义，无法复用。而且，在超类型原型中定义的方法，对子类型不可见

2.组合继承

思路：使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

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.constructor = SubType;

SubType.prototype.sayAge = function () {

　　alert(this.age);

};

var instance1 = new SubType(‘bob‘, 20);

instance1.colors.push(‘black‘); 

alert(instance1.colors); // "red,blue,green,black"

instance1.sayName();  // ‘bob‘

instance1.sayAge();  // 20

var instance2 = new SubType(‘alice‘, 21);

alert(instance2.colors); // "red,blue,green"

instance2.sayName(); // ‘alice‘

instance2.sayAge(); // 21

 

3.原型式继承（object.create()）

实现原理

function object(o) {

　　function F(){}

　　F.prototype = o;

　　return new F()  //返回的是构造函数的实例，所以只有_proto_属性，指向F.prototype

}

举例：

var person = {

　　name: ‘bob‘,

　　friends: [‘a‘, ‘b‘, ‘c‘]

}

var anotherPerson = Object.create(person);

anotherPerson.name = ‘alice‘;

anotherPerson.friends.push(‘d‘);

 

var yetAnotherPerson = Object.create(person);

yetAnotherPerson.name = ‘Linda‘;

yetAnotherPerson.friends.push(‘e‘);

alert(person.friends);  // ‘a,b,c,d,e‘

在没有必要兴师动众地创建构造函数，而只想让一个对象与一个对象保持类似的情况下，可以用原型式继承，不过，

包含引用类型的值的属性始终都要共享相应的值，就像使用原型模型一样

 

4.寄生式继承

function object(obj) {

　　return obj;

}

function createAnother (original) {

　　var clone = object(original);  // 通过调用函数创建一个新对象

　　clone.sayHi = function() {   // 以某种方式增强对象

　　　　alert(‘Hi‘);

　　}

　　return clone;  //返回这个对象

}

var person = {

　　name: ‘bob‘,

　　friends: [‘a‘, ‘b‘, ‘c‘]

}

var anotherPerson = createAnother(person);

anotherPerson对象具有了person所有属性和方法， 而且修改anotherPerson会影响person, anotherPerson相当于是一个指针，指向person对象，两者会相互影响

 

5.寄生组合式继承

组合式继承最大的不足是无论什么情况下，会调用两次超类型构造函数；一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

看下面例子：

function SuperType(name) {

　　this.name = name;

　　this.colors = [‘red‘, ‘blue‘, ‘green‘]

}

SuperType.prototype.sayName = function() {

　　alert(this.name)

}

function SubType() {

　　SuperType.call(this,name);  //第二次调用SuperType()

　　this.age = age;

}

SubType.prototype = new SuperType();  //第一次调用SuperType()

SubType.prototype.constructor = SubType; 

SubType.prototype.sayAge = function() {

　　alert(this.age);

}

解释： 第一次调用SuperType()时，将SuperType()的实例属性赋给了SubType.prototype；相当于在SubType.prototype上创建了两个属性name，colors

第二次调用SubType()构造函数时，又会调用SuperType()一次，这次又在新对象上创建了实例属性name和colors，于是，这两个属性就屏蔽了原型中的两个同名属性。这样就在SubType.prototype上创建了多余的不必要的属性

 

寄生组合式继承：不必为了指定子类型的原型而调用超类型构造函数，我们所需要的无非就是超类型原型的一个副本而已。

　　　　　　　　本质上，就是利用寄生式继承来继承超类型的原型，再将结果指定给子类型原型

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() {

　　SuperType.call(this,name);  

　　this.age = age;

}

inheritPrototype(subType, superType);

SubType.prototype.sayAge = function() {

　　alert(this.age);

}