聊聊JavaScript的原型

这是我参与更文挑战的第27天，活动详情查看： 更文挑战

零、了解下原型链

首先看下上图，对于没接触过的小伙伴来说有点难以理解，那就只看图中蓝色的线，这条线即为原型链的本质： 通过构造函数创建实例， 实例原型__proto__指向构造函数原型Person.prototype。

构造函数原型指向基本类型原型， 基本类型原型指向null。

其他黑色线则代表了原型与构造函数之间的关系：原型是构造函数的原型，构造函数是原型的构造函数。（禁止套娃）

所以到最后，一些皆空（null）了。

__proto__是对象的原型指向。

prototype是函数独有的属性，但函数也是对象，所以函数也有__proto__。

暂时先别纠结prototype和__proto__，大概先了解这些就可以

一、创建对象的几种方法

//创建对象的几种方式
//1.字面量
var obj1 = {name: 'solo obj1'};

//2.new Object
var obj2 = new Object({name: 'solo obj2'})

//3.构造函数创建
var M = function(name){
	this.name = name;
}
var obj3 = new M('solo obj3');

//4.Object.create
var p = {name: 'p'};
var obj4 = Object.create(p);
复制代码

怎么创建在本文不是重点，重点是他们的关系。控制台打印下关系。

二、原型、构造函数、实例、原型链

还是先看张图，看不懂的话先向下看，会解释的。别太纠结图。

首先，需要一个起点，可以放在实例或者构造函数上，这里以构造函数为起点。

var Person = function (name){
  this.name = name;
}
复制代码

但我们有了构造函数之后，就会new一个实例，var human = new Person('Corey');到这里，我们就复现了图中的构造函数和实例部分了。

顺便知道了这里的实例是通过构造函数创建的。 然后继续跟着图走。

实例是通过构造函数创建的，但是他的原型__proto__指向原型（Object）。

而原型（Object）的在这里简略了其他的可能， 直接来到根原型（null）（我自己想的词，嘻嘻嘻），也就是文章开篇的万物皆空（null）。

三、instanceof的原型

instanceof 用于判断一个引用类型是否属于某构造函数；还可以在继承关系中用来判断一个实例是否属于它的父类型。

instanceof 的原理是判断实例对象的__proto__是否与构造函数的 prototype 指向同一个引用。

obj3.__proto__ === M.prototype
true
M.prototype.__proto__ === Object.prototype
true

// 准确的判断构造函数是哪个，可以用constructor
obj3.__proto__.constructor === M
true
obj3.__proto__.constructor === Object
false
复制代码