原型与原型链

简介

我又出来给大家唠嗑了，上一篇文章我们讲了原型的由来，这次我们就来一起深入了解一下原型吧。废话不多说，搞起！

本篇文章对新手有点不太友好，建议有点基础在看。

ps：下面所讲的都是基于默认情况下，不考虑一些个别情况。

原型

先复习一下原型是什么，之前在讲原型由来的时候说过，原型是一个可以让所有相同实例共享属性和方法的公共对象，它的作用就是为了让我们使用方便，并且节约空间。但具体如何让我们使用方便？让我们从一段代码入手：

let arr = [];
let obj = {};
console.log(arr.push);//ƒ push() { [native code] }
console.log(arr.a);//undefined
console.log(obj.push);//undefined
console.log(obj.toString);// toString() { [native code] }

疑问：不同的实例有不同的属性，那实例的这些属性存在哪？带着这样的问题，我们开始介绍以下几个属性，也许它们能帮我们解惑。

prototype属性

上面的答案应该不难，我们没有给数组实例和对象实例添加这些属性，上面也说过原型是一个可以让所有相同实例共享属性和方法的公共对象，那说明这些属性一定存放在其特定的原型上啦，那在代码中到底如何表示原型？在这我就不卖关子了，直接公布答案，它就是prototype，默认情况下，它指向的就是当前函数的原型对象，这么说还是有点不好理解，看一张图：

//自定义一个构造函数
function Person() {}
//生成一个person实例
let person = new Person();
//查看这个prototype属性是谁的属性
console.log(person.prototype);//undefined
console.log(Person.prototype);//{constructor: ƒ}
console.log(Person.prototype.prototype);//undefined

//声明一个变量，让这个变量指向这个数组的地址
let arr = [1,2,3];
//查看这个prototype属性是谁的属性
console.log(arr.prototype);//undefined
console.log(Array.prototype);//[constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]
console.log(Array.prototype.prototype);//undefined

//Array的原型是对象类型
console.log(typeof Array.prototype);//object
//Array原型上存在push这个属性
console.log(Array.prototype.push);// push() { [native code] }
//Array原型上的push和arr上的push是同一个
console.log(Array.prototype.push === arr.push);//true

通过上面的代码，我们发现：
1.不管是系统内置的函数对象，还是我们自定义的函数，只有函数才有 prototype 属性。
2.原型对象和普通对象除了属性不一样之外，没有其他区别，不同的原型包含的属性名不一样，但默认情况下，都有一个共同的属性名 constructor。

疑问：既然实例对象上面没有 prototype 属性，那它又是如何调用原型上的这些方法(我们把对象上可以调用的属性叫做方法)呢？下面就需要介绍 __proto__ 属性了。

__proto__属性

所有对象都有 __proto__ 属性，它也被叫做隐式原型，它指向创建该对象的函数的原型。是不是听上去很绕，直接上图：

然后代码走起：

function Person() {}
var person = new Person();
console.log(person.__proto__ === Person.prototype);//true
console.log(Array.__proto__ === Function.prototype);//true

上面说到所有对象都有 __proto__ 属性，那函数作为一个特殊的对象，它应该也有这属性，通过上面的代码，让我们知道系统内置函数 Array 的隐式原型指向 Function 的原型，我们自定义函数的隐式原型指向自定义函数的原型。但这样只能说明对象的 __proto__ 属性与创建该对象的函数原型产生了关系，并没有具体说明如何调用原型上的方法呀。别慌，请继续往下看。

对象属性的访问

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.getInfo = function() {
  console.log(this.name,this.age);
}
let person = new Person("xm",18);
person.getInfo();//xm 18
person.getInfo = function() {
  console.log("none");
}
person.getInfo();//none

通过上面的代码，我们好像知道了什么不得了的秘密。相信聪明的你们应该想到了，没错，在特定条件下，实例对象通过 __proto__ 这个属性能读取原型上面的属性或方法。

所以对象属性的访问并没有我们想象的那么简单，规则如下：
1.当访问对象属性的时候，如果对象自身有该属性，则直接使用自身的属性。
2.否则依次通过 __proto__ 属性往上，查找其原型对象上是否有该属性，如果有就返回该属性，到最后也没有就返回 undefined。
而我们把这种可以通过 __proto__ 属性依次往上查找的这条链叫做原型链。

But，使用 __proto__ 是有争议的，也不鼓励使用它(通过这种方式修改原型的行为也影响性能哦)。因为它从来没有被包括在 ECMAScript 语言规范中，但是现代浏览器都实现了它。__proto__ 属性已在ECMAScript 6 语言规范中标准化，用于确保 Web 浏览器的兼容性。现在更推荐使用Object.getPrototypeOf 方法。

看出原型多么方便了吗，我们可以把一些公共的属性与方法写在函数的原型上，当我们想要调用实例对象公共方法的时候，就不用每一个实例都写一个方法，节省了不必要的内存消耗。当然你也可以私自给单个实例添加方法，这全凭你的喜好。

constructor属性

最后，别忘了 constructor 属性啊。默认情况下，每个原型对象都有一个 constructor 属性，它用来指向该原型对象的构造函数本身。老样子，先上图：

function Person() {}
let person = new Person();
console.log(Person.prototype.constructor === Person);//true
console.log(person.constructor.name);//Person

在原型的由来中，我也说过，constructor 属性是用来标识对象类型的，让我们知道这个对象是哪个函数创建的。上面的代码中，因为 person 实例本身没有 constructor 属性，所以通过 __proto__ 属性找到了 Person 的原型，并在上面找到了 constructor 属性后，把结果返回了出去。

注意点

那么大体的东西讲的差不多了，现在要给你们讲点特殊的存在。在js中，大部分函数的隐式原型都指向 Function 的原型，那么 Function 的隐式原型呢？原型也就是对象，只不过访问对象自身不存在的属性的时候，来原型上找找看而已，原型的隐式原型指向 Object 的原型，那么 Object 原型的隐式原型又指向什么呢？请看接下来的代码：

//Array函数本身没有constructor属性，于是打算到Function的原型上找找看,结果就找到了，并且constructor属性指向了Function
console.log(Array.constructor === Function);//true

//Function的隐式原型指向了Function的原型，Function对象是在js引擎启动的时候就自动添加上去的，它是特殊的存在
console.log(Function.__proto__ === Function.prototype);//true

//函数原型的隐式原型指向Object的原型，说明原型本质就是new Object
console.log(Function.prototype.__proto__ === Object.prototype);//true
console.log((new Object()).__proto__ === Object.prototype);//true

//Object原型的隐式原型指向null
console.log(Object.prototype.__proto__);//null

也许大家看完脑子还是晕晕的，不怕，我给大家上一张终极版的图：

特别注意！！！
1.Function 的隐式原型指向函数的原型(Function.__proto__ === Function.prototype //true)。
2.Object 原型的隐式原型指向 null(Object.prototype.__proto__ === null //true)。

结语

好了，上面讲了这么多关于原型与原型链的知识，但这也只是解决了实例对象可以调用一些公用方法与属性的问题而已。看到这不代表就结束了，因为原型链的这种继承方式也有弊端。那到底有什么弊端呢，请听下回分解，js中的对象继承。

能看到这，还是非常感谢大家，如果大家对我的表达方式有啥不舒服的地方，请帮我指出来，我也会尽量做出改变。再次感谢，手动鞠躬！