js的原型、原型链

一、javascript继承机制

在Javascript语言中，new命令后面跟的不是类，而是构造函数(javaScript语言的传统方法通过构造函数定义并生成实例对象，ES6中新增了Class语法糖，通过对象模版定义和生成实例对象)。用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。因此Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。因此可以把那些不变的属性和方法，直接定义在prototype对象上，然后生成实例。由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样，这可简单理解为Javascript的继承机制。

二、原型

在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。
“[[Prototype]]”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了__proto__这个非标准（不是所有浏览器都支持）的访问器（ECMA引入了标准对象原型访问器”Object.getPrototype(object)”）。在JavaScript的原型对象中，还包含一个”constructor”属性，这个属性对应创建所有指向该原型的实例的构造函数。

三、对象实例化规则

在JavaScript中，每个函数 都有一个prototype属性，当一个函数被用作构造函数来创建实例时，这个函数的prototype属性值会被作为原型赋值给所有对象实例（也就是设置 实例的`__proto__`属性），也就是说，所有实例的原型引用的是函数的prototype属性。(注：只有函数对象才会有这个属性。函数具有prototype属性，但函数也是对象，因此也具有__proto__属性，实例对象只有__proto__属性)。

实例化对象(new)的过程：例 let person = new Person('刘', 18)

1.  let person = {}：初始化一个对象person；
2.  person.__proto__ = Person.prototype：为对象person添加__proto__属性，且该属性指向 Person.prototype；
3.  Person.call(person, "刘", 18)：重新定义Person内的this，调用构造函数Person初始化person。

四、Object

Object对象本身是一个函数对象。既然是Object函数，就肯定会有prototype属性，所以可以看到”Object.prototype”的值就是”Object {}”这个原型对象。反过来，当访问”Object.prototype”对象的”constructor”这个属性的时候，就得到了Obejct函数。
另外，当通过”Object.prototype.__proto__”获取Object原型的原型的时候，将会得到”null”，也就是说”Object {}”原型对象就是原型链的终点了。

五、Function

所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype，该属性也是一个对象；那么在原型对象上有一个 constructor 属性，该属性指向的就是构造函数；而实例对象上有一个 _proto_  属性，该属性也指向原型对象，并且该属性不是标准属性，不可以用在编程中，该属性用于浏览器内部使用。

如上面例子中的构造函数，JavaScript中函数也是对象，所以就可以通过__proto__查找到构造函数对象的原型。
Function对象作为一个函数，就会有prototype属性，该属性将对应”function () {}”对象。
Function对象作为一个对象，就有__proto__属性，该属性对应”Function.prototype”，也就是说，”Function.__proto__ === Function.prototype”。

在这里对“prototype”和“proto”进行简单的介绍：
对于所有的对象，都有__proto__属性，这个属性对应该对象的原型.
对于函数对象，除了__proto__属性之外，还有prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（也就是设置实例的__proto__属性）。

六、原型链

因为每个对象和原型都有原型，对象的原型指向原型对象，而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。以Person和person为例：

person.__proto__ === Person.prototype，

而 Person.prototype(即Person {}) 也有_proto属性，它指向创建它的函数对象(Object)的prototype，即Person.__proto__ === Object.prototype，

而 Object.protptype(即Object {}) 同样有__proto__属性，只是该属性指向特殊，为null，表明其已到达了顶端。

 这一系列由__proto__ 串起来的链称为原型链，其结构图可如下所示：

(非原创图)

七、构造函数、原型、实例之间的关系

1. Object

(非原创图)

2. Function+Object+Array

(非原创图)

八、属性查找：

当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止，到查找到达原型链的顶部（也就是 Object.prototype），如果仍然没有找到指定的属性，就会返回 undefined。例：

function Person(name, age){

this.name = name;

this.age = age;

}

Person.prototype.MaxNumber = 9999;

Person.__proto__.MinNumber = -9999; 

let will = new Person("Will", 28);

console.log(will.MaxNumber); // 9999

console.log(will.MinNumber); // undefined

在这个例子中分别给”Person.prototype “和” Person.__proto__”这两个原型对象添加了”MaxNumber “和”MinNumber”属性，这里就需要弄清”prototype”和”__proto__”的区别了。

九、”prototype”和”__proto__”的区别

仍以Person、person为例。

 Person作为构造函数时的prototype 属性与Person作为普通函数时的__proto__属性并不相等：

console.log(Person.__proto__ == Person.prototype); //false

实际上，Person作为一个普通函数调用时，它的构造函数就是内置对象Function，因此其指向的原型对象即Function.prototype，与person.__proto__ === Person.prototype同理。它的原型的原型指向为：

console.log(Person.__proto__.__proto__ ); //Object{}

即 console.log(Function.prototype.__proto__ ); //Object{}

当Person作为构造函数时，它的原型、它的原型的原型指向为：

console.log(Person.prototype); //Person{}

console.log(Person.prototype.__proto__); //Object{}

 可得结果：

console.log(Person.__proto__.__proto__ === Person.prototype.__proto__); //true

因此：prototype属性可以给函数和对象添加共享(继承)的方法、属性，而__proto__是查找某函数或对象的原型链的方式。所以可以说原型链是通过__proto__属性链接起来的。

上面的例子中若想will查找到MinNumber属性，则添加方式为：

Person.MinNumber = -9999;   

或    Person.prototype.__proto__.MinNumber = -9999;

“Person.prototype “对应的就是Person构造出来所有实例的原型，也就是说”Person.prototype “属于这些实例原型链的一部分，所以当这些实例进行属性查找时候，就会引用到”Person.prototype “中的属性。

十、对象创建方式影响原型链

let July = {

name: "张三",

age: 28,

getInfo: function(){

           console.log(`${this.name} is ${this.age} years old.`);

}

}

console.log(July.getInfo());

当使用这种方式创建一个对象的时候，原型链就变成下图了. July对象的原型是”Object.prototype”也就是说对象的构建方式会影响原型链的形式。

(非原创图)

十一、总结

1. 所有的对象都有__proto__属性，该属性 对应 该对象的原型.

2. 所有的函数对象都有prototype属性，该属性的值会被赋值给该函数创建的实例对象的_proto_属性.

3. 所有的原型对象都有constructor属性，该属性对应创建所有指向该原型的实例的构造函数.

4.  函数对象和原型对象通过prototype和constructor属性进行相互关联. 

5. prototype属性可以给函数和对象添加共享(继承)的方法、属性，而__proto__是查找某函数或对象的原型链的方式。

十二、参考资料

1. https://www.jb51.net/article/80109.htm

2. http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

3. https://www.cnblogs.com/sinstone/p/5136871.html

4. https://blog.csdn.net/bluesky1215/article/details/54891147?utm_source=blogxgwz0