JS 基础篇(二)：理解JS原型对象与原型链

1、什么是原型对象和原型链

JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每一个对象对应拥有一个原型，对象以其原型为模板、从原型继承方法和属性。而同时原型也是对象，它也拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为什么一个对象会拥有定义在其余对象中的属性和方法。

注：由于原型同时也是对象，因此也能够称呼为原型对象。

2、为何使用原型对象

一、Javascript 并无类继承模型，而是使用原型对象进行原型式继承。

二、原型对象的用途是为每一个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已。而且全部的实例是共享同一个原型对象，所以有别于实例方法或属性，原型对象仅有一份。

3、原型对象的理解

一、对象__proto__属性的值就是它所对应的原型对象，即“对象.__proto__ === 对象对应的原型对象”。

二、在Javascript中，每一个函数都有一个属性为prototype指向函数自身的原型。即“函数.prototype === 自身对应的原型对象”。

案例分析：

code1

function Person(){ }  //构造函数建立对象
Person.prototype.name = "Jie"; //添加属性值到原型对象上
console.log(Person.prototype);
复制代码

原型对象内包含咱们以前添加到原型对象上的name属性，还包含一个"constructor"属性，这个属性对应建立全部指向该原型的实例的构造函数。

code2

function Person(){ }  //构造函数建立对象
Person.prototype.name = "Jie"; //添加属性值到原型对象上

var person = new Person(); //建立实例对象
person.age = 23;  //建立属性值到实例对象上
console.log(person);
复制代码

经过上面的两段代码分析，咱们能够得出实例对象person的__proto__属性就是Person的prototype属性。person.__proto__与Person.prototype均指向了原型对象。

而且经过上面的结果能够看出，实例对象person的原型(person.__proto__)的原型(person.__proto__.__proto__)是Object对象的原型。

能够将上面的分析进行图解，以下所示：

• prototype: 在函数身上，指向原型对象
• __proto__: 在对象身上（包括函数建立的对象, 函数自己和原型对象），指向自身的原型
• constructor: 在原型对象上，指向构造函数, 在多级继承的时候，指明构造函数方便在对象上扩展原型属性
• Object.__proto__为null: 原型的顶端

在Javascript中，每一个函数都有一个原型属性prototype指向函数自身的原型，而由这个函数建立的对象也有一个__proto__属性指向这个原型。（即person.__proto__ === Person.prototype; //true）

而函数的原型是一个对象，因此这个对象也会有一个__proto__指向本身的原型，这样逐层深刻直到Object对象的原型(null)，这样就造成了原型链。

函数的原型对象的constructor默认指向函数自己，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针__proto__，该指针指向上一层的原型对象，而上一层的原型对象的结构依然相似，这样利用__proto__一直指向Object的原型对象上，而Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端，如此变造成了javascript的原型链继承，同时也解释了为何全部的javascript对象都具备Object的基本方法。

4、"prototype"和"__proto__"区别

对于全部的对象，都有__proto__属性，这个属性对应该对象的原型。 对于函数对象，除了__proto__属性以外，还有prototype属性，当一个函数被用做构造函数来建立实例时，该函数的prototype属性值将被做为原型赋值给全部对象实例（也就是被设置为全部实例的__proto__属性值）

5、查找属性

当访问一个对象的属性时，Javascript 会从对象自己开始往上遍历整个原型链，直到找到对应属性为止。若是此时到达了原型链的顶部，也就是 Object.prototype，仍然未发现须要查找的属性，那么 Javascript 就会返回 undefined 值。

例如：当你访问 person 的一个属性, 浏览器首先查找 person 是否有这个属性. 若是 person 没有这个属性, 而后浏览器就会在 person 的 __proto__ 中查找这个属性(也就是 Person.prototype). 若是 person 的 __proto__ 有这个属性, 那么 person 的 __proto__ 上的这个属性就会被使用. 不然, 若是 person 的 __proto__ 没有这个属性, 浏览器就会去查找 person 的 __proto__ 的 __proto__ ，看它是否有这个属性. 默认状况下, 全部函数的原型属性的 __proto__ 就是 Object.prototype. 因此 person 的 __proto__ 的 __proto__ (也就是 Person.prototype 的 __proto__ (也就是 Object.prototype)) 会被查找是否有这个属性. 若是没有在它里面找到这个属性, 而后就会在 person 的 __proto__ 的 __proto__ 的 __proto__ 里面查找. 然而这有一个问题: person 的 __proto__ 的 __proto__ 的 __proto__ 不存在. 最后, 原型链上面的全部的 __proto__ 都被找完了, 浏览器全部已经声明了的 __proto__ 上都不存在这个属性，而后就得出结论，这个属性是 undefined.

6、原型对象操做

观察如下代码：

function Person(){
    this.name = "Jie";
}
var person = new Person();

Person.prototype.say = function(){
    console.log("success");
}
复制代码

咱们的代码中定义了构造器，而后用这个构造器建立了一个对象实例，此后向构造器的 prototype 添加了一个新的方法。

say() 方法仍然可用于 person 对象实例——旧有对象实例的可用功能被自动更新了。这证实了先前描述的原型链模型。这种继承模型下，上游对象(父类)的方法不会复制到下游的对象(子类)实例中；下游对象自己虽然没有定义这些方法，但浏览器会经过上溯原型链、从上游对象中找到它们。这种继承模型提供了一个强大而可扩展的功能系统。

所以，咱们能够将一些通用的，公用的属性或方法定义在prototype中。

例如：

一、"getInfo"方法是构造函数Person的一个成员，当经过Person构造两个实例的时候，每一个实例都会包含一个"getInfo"方法。

二、原型就是为了方便实现属性的继承，因此能够将"getInfo"方法看成Person原型（Person.prototype）的一个属性，这样全部的实例均可以经过原型继承的方式来使用"getInfo"这个方法了。而且改变getInfo方法所有的实例都会同步。

function Person(name, age){
    this.name = name;
    this.age = age;
}

Person.prototype.getInfo = function(){
    console.log(this.name + " is " + this.age + " years old");
};
复制代码

参考资料：

MDN对象原型

原型对象

了解JS原型对象

__proto__和prototype