理解prototype和__proto__（继承与原型链）

作者：心叶
时间：2018-07-11 10:20

基本概论和关系

从关系图中可以看出来，ECMAScript中创建一个对象是通过new构造函数实现的，而本质上来说这个对象其实是以构造函数的属性prototype指向的对象为基本模板的，因此新对象的__proto__属性表明了自己来源于谁。

prototype

该属性用来指向创建一个对象的基本模板，默认指向new构造函数，也可以修改，或者通过改属性为新对象添加属性。

需要注意的是，该属性只有函数才有。

//构造函数
function Clazz(name) {
    this.name = name;
}

//创建对象
var clazz = new Clazz('心叶');

//通过prototype给对象添加方法
Clazz.prototype.getName = function () {
    alert(this.name);
};

clazz.getName();

proto

这个是对象上的属性，比较有意思，因为不是标准中规定的，使用的时候要小心。

该属性的意思指创建该对象的构造函数的prototype，因此你可以通过对象的该属性修改原型。

function Clazz(name) {
    this.name = name;
}

var clazz = new Clazz('心叶');
var clazz2 = new Clazz('美羽');

//通过__proto__给原型添加方法，这样创建的对象也会有该方法
clazz2.__proto__.getName = function () {
    alert(this.name);
};

clazz.getName();

继承

借助prototype或__proto__可以实现继承效果，下面是一个使用prototype的例子。

// 动物
function Animal(name) {
    this.name = name;
}

// 给动物添加方法
Animal.prototype.getInfo = function () {
    console.log('我的名字是:' + this.name);
};

// 猫
function Cat(name, age) {
    this.age = age;
    Animal.call(this, name);
}

// 设置猫的原型为动物
Cat.prototype = new Animal();

//恢复构造函数为猫
Cat.prototype.constuctor=Cat;

// 给猫添加方法
Cat.prototype.getAge = function () {
    console.log('我的年龄是:' + this.age);
};

// 建立猫对象
var cat = new Cat('可爱的猫咪', 19);
cat.getInfo();
cat.getAge();

//建立动物对象
var animal = new Animal('动物');
animal.getInfo();