理解Javascript原型和原型链

原型：理解__proto__和prototype

先从红宝书《Javascript高级程序设计》第六章的一段话开始理解：

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个 constructor (构造函数)属性，这个属性包含一个指向 prototype 属性所在函数的指针。

当调用构造函数创建一个新实例后，该实例的内部将包含一个指针(内部属性__proto__)，指向构造函数的原型对象。

接下来我们来梳理一下__proto__和 prototype 的关系。

1. 每个函数都有prototype属性，指向函数的原型对象；

2. 每个实例都有__proto__内部属性，指向其构造函数的原型对象；

3. 即实例的__proto__ === 构造函数的prototype。

原型链

每 个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数 的指针......如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。

// example 1
let obj = {};
obj.__proto__ === Object.prototype    // true
Object.prototype.__proto__ === null   // true


// example 2
let arr = [];
arr.__proto__ === Array.prototype     // true
Array.prototype.__proto__ === Object.prototype    // true
Object.prototype.__proto__ === null   // true

拓展：原型链继承

概念：一个新类从已有的类中获得其已有特性，这种现象称为类的继承。常见的继承方式有两种:接口继承和实现继承。

ECMAScript 中无法实现接口继承。ECMAScript 只支持实现继承，而且其实现继承主要是依靠原型链来实现的。原型链在上文已进行了解释。

通常，我们实现原型链继承的方式如下：

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

var instance = new SubType();
alert(instance.getSuperValue());     //true

该方式可以实现继承，但是有一个缺点，就是如果在子类的实例中修改了继承的引用类型属性，对该属性进行修改后会影响到其他所有的实例，以及父类的实例。

所以我们更常用的方法是组合继承：原型链加借用构造函数继承。

方法如下：

 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("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

补充一个曾在面试中遇到的小问题：

Array.m = 1;
let arr = [];
console.log(arr.m);    // undefined


Array.prototype.m = 2;
console.log(arr.m)     // 2

参考内容：

Javascript继承机制的设计思想 - 阮一峰的网络日志