js的原型、原型链解析

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)

let person = {}：初始化一个对象person； person.__proto__ = person.prototype：为对象person添加__proto__属性，且该属性指向 person.prototype； 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__是查找某函数或对象的原型链的方式。