简单认识 JS 原型与原型链

原型是JavaScript中一个比较难理解的概念，为深入理解JavaScript 中的原型、原型链，整理下思路。

原型是 JavaScript 中一个比较难理解的概念，原型相关的属性也比较多，对象有 prototype 属性，函数对象有 prototype 属性，原型对象有 constructor 属性。

一、初识原型

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

二、规则

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

上面说这么多，大家肯定还不了解什么是原型、原型链。原型（prototype）既然是对象的一个属性，那我们就从对象开始理解。

三、Object 与 Function

先来看 Object 到底是什么，在浏览器的控制台输出

console.log(Object);
console.log(Object({}));
console.log(new Object);
//输出的结果
function Object() { [native code] }
Object {}
Object {}

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

简单认识 JS 原型与原型链

Function — JavaScript 中函数也是对象，所以就可以通过__proto__查找到构造函数对象的原型。
Object 对象本身是一个已经定义好的函数对象。那我们自己定义一个 people 对象，看看它的原型（people.prototype）输出结果有何不同。

var people=function(name,age){
    this.name=name,
    this.age=age
}

输出结果：

简单认识 JS 原型与原型链
有 constructor 属性说明 people 对象是原型对象，people.__proto__ 获取到的就是 Object 对象。
然后我们为 people 构建一个实例化对象 student ，进行一些输出。

var student=new people;
console.log(people.prototype);
console.log(student.__proto__);
console.log(student.__proto__.__proto__);
console.log(student.prototype);

简单认识 JS 原型与原型链

people.prototype 和student.__proto__ 的输出结果相同可以得出 —— people.prototype === student.__proto__。
函数对象可以通过函数对象.prototype 得到它的原型对象，实例化对象.__ proto__ 也可以得到它的原型对象。
prototype 作为对象的内部属性，是不能被直接访问的，因此我们可以通过对象的 __ proto__ 属性得到对应的对象原型。
四、原型链
理解原型链：
原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
因为每个对象和原型都有原型，对象的原型指向原型对象，而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。
简单回顾下构造函数、原型和实例的关系：
每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针（prototype），而实例则包含一个指向原型对象的内部指针（__proto__）。

简单认识 JS 原型与原型链

原型链的问题：
虽然很强大，可以用它来实现继承，但它也存在一些问题。最主要的问题来自包含引用类型值的原型。在通过原型来实现继承时，原型实际上会变成一个类型的实例。于是，原先的实例属性也顺理成章的变成了现在的原型的属性了。
例如

student.__proto__.add=function(){
    return sex="女"
}
console.log(student.__proto__);

输出结果：
简单认识 JS 原型与原型链

原先的原型对象并中没有 add 这个函数，但是通过__proto__给 student 对象添加 add 函数后，people 对象的原型中就有了add 函数。

总结：

所有的对象都有 proto 属性，该属性对应该对象的原型；
所有的函数对象都有 prototype 属性，该属性的值会被赋值给该函数创建的对象的 __proto__属性；
所有的对象可以通过不断使用 proto 属性找到 Object.prototype ；
所有的原型对象都有constructor属性，该属性对应创建所有指向该原型的实例的构造函数；
函数对象和原型对象通过prototype和constructor属性进行相互关联。

作者：云音流
链接：https://www.jianshu.com/p/2f737b689783
來源：简书

简单认识 JS 原型与原型链

一、初识原型

二、规则

三、Object 与 Function

总结：

相关推荐