js 中的原型链与继承

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

1、原型链

先回忆一下构造函数和原型以及实例的关系：每个构造函数都有一个原型对象，原型对象中有一个指向构造函数的指针，而所有实例都有一个指向原型对象的内部指针。

那么实现原型链的具体操作是这样的：让构造函数的原型对象等于另一个类型的实例。此时，原型对象将包含一个指向另一个原型的指针，另一个原型中也包含这一个指向另一个构造函数的指针。

如果另一个原型又是再另一个类型的实例的话，依然存在上述关系，如此层层递进，就构成一个链条，即为原型链。

通过原型链继承实例：

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();
console.log(instance.getSuperValue()); //true
console.log(instance.getSubValue());   //false

原型链关系图

出现Object的原因是：所有引用类型默认都继承了Object，而且也是通过原型链继承的。

2、继承

上面的例子就是一个仅仅使用原型继承的例子，但仅仅使用原型继承会共享所有属性和方法，也不能在不影响所有对象实例的情况下向超类的构造函数传递参数。下面介绍其他继承方式。

2.1 仅通过构造函数继承

function SuperType(name){
    this.name= name;
    this.colors = ["red","blue","green"];
}
function SubType(){
    SuperType.call(this,"tom");
    this.age = 29;
}

var instance = new SubType();
console.log(instance.age);  // 29
console.log(instance.name);  // tom

这种方法需要用到 apply() 或 call() 函数。

能有自己的特性，也可以传递参数给超类。但超类的原型中的属性和方法对子类是不可见的（访问不到）。

2.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); //执行new SubType(name,age)时，第二遍执行 SuperType()，子类对象实例将包含超类构造函数的属性
    this.age = age;
}

// 对象实例的原型会包含超类构造函数的属性,还有超类构造函数原型的属性
SubType.prototype = new SuperType(); // 第一遍执行 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function (){
    console.log(this.age);
}

var instance1 = new SubType("tom",29);
instance1.colors.push("black");
console.log(instance1.colors); // ["red", "blue", "green", "black"]
instance1.sayName();  // tom
instance1.sayAge();  //29

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

这种方法比较常用。

2.3 原型式继承

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

var person = {
    name: "Tom",
    friends:["Shelby","Court","Van"]
}

var p1 = createObject(person);
p1.name = "Greg";
p1.friends.push("Rob");

var p2 = createObject(person);
p2.name = "Linda";
p2.friends.push("Barbie");

console.log(person.friends); //  ["Shelby", "Court", "Van", "Rob", "Barbie"]

这种方法的核心是：将已有的对象作为新对象的原型，相当于继承。这种继承比较简单，方便。

可以将上面的新修改一下，在已有对象的基础上给新对象添加新属性。

function createObject(o){
    function F(){};
    F.prototype = o;
    var object = new F();
    object.sayHi = function(){
        console.log("hi!");
    }
    return object;
}

ECMAScript提供了一个方法 Object.create() 来实现这种原型模式继承。接受两个参数：作为新对象原型的对象和（可选的）一个为新对象定义额外属性的对象，第二个参数和Object.defineProperties()方法的第二个参数相同。

var person = {
    name: "Tom",
    friends:["Shelby","Court","Van"]
}

var p1 = Object.create(person,{
    name:{value : "Greg"}
});
p1.name = "Greg";
p1.friends.push("Rob");
console.log(p1.name); //Greg

var p2 = Object.create(person);
p2.name = "Linda";
p2.friends.push("Barbie");

console.log(person.friends); //  ["Shelby", "Court", "Van", "Rob", "Barbie"]

2.4 原型式的组合继承

上述提到的构造函数和原型的组合继承因为在创建新子类对象实例时，会执行两次超类构造函数（一次是给子类构造函数原型赋值，一次是执行 new SubType() ），这导致子类对象实例和它的原型都有一套超类构造函数的属性。

可以减少一次：只要给子类原型指定为超类原型对象，而不必为了指定子类的原型而调用超类的构造函数。

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;
}

function inheritPrototype(subType,superType){
    function F(){};
    F.prototype = superType.prototype;
    subType.prototype = new F(); // 子类的原型继承了超类的原型对象
    subType.prototype.constructor = subType; 
}
inheritPrototype(SubType,SuperType);

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

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

js 中的原型链与继承

猜你喜欢