JS 原型与原型链详解

JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象。
凡是通过 new Function()创建的对象都是函数对象，
其他的都是普通对象

1、构造函数

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

person1 和 person2 都是 构造函数 Person 的实例

结论：实例的构造函数属性（constructor）指向构造函数，即person1.constructor == Person

  console.log(person1.constructor == Person); //true
  console.log(person2.constructor == Person); //true

2、原型对象

function Person(name) {
   this.name = name;
}
Person.prototype.say = function(){}

var person1 = new Person('x')

结论1：原型对象，就是构造函数的prototype属性，即Person.prototype

结论2：在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向它所属的构造函数（Person），即：构造函数.prototype.constructor === 构造函数

结论3：那原型对象是用来做什么的呢？主要作用是用于继承

结论4：每个对象都有 __proto__ 属性，但只有构造函数对象才有 prototype 属性

3、实例的构造属性与原型对象的构造属性(constructor)

通过以上学习，你可能会想到如下问题

person1.constructor == Person
Person.prototype.constructor == Person

• person1 为什么有 constructor 属性？那是因为 person1 是 Person 的实例。
• 那 Person.prototype 为什么有 constructor 属性？？同理， Person.prototype （你可以把它想象成 Person的一个实例） 也是Person 的实例。即就是在 Person 创建的时候，创建了一个它的实例对象并赋值给它的 prototype

结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。

4、instanceof

instanceof运算符用来判断该构造函数的prototype属性(原型对象，即构造函数.prototype)是否存在于 要检测对象的原型链上(对象.__proto__)

  console.log([] instanceof Array); 

5、proto

定义：JS 在创建对象的时候，都有一个叫做__proto__ 的内置属性，用于指向创建它的构造函数的原型对象 。

具体例子解析如下：对象 person1 有一个 __proto__属性，创建它的构造函数是 Person，构造函数的原型对象是 Person.prototype ，
所以：person1.__proto__ == Person.prototype

综合上方案例，得到如下结论：

Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;

6、构造器

熟悉 Javascript 的童鞋都知道，我们可以这样创建一个对象：

var obj = {}
// 它等同于下面这样：
var obj = new Object()

obj 是构造函数（Object）的一个实例。所以：

obj.constructor === Object
obj.__proto__ === Object.prototype

构造函数（Object）本身就是一个函数（就是上面说的函数对象），它和上面的构造函数 Person 差不多。只不过该函数是出于创建新对象的目的而定义的。所以不要被 Object 吓倒。

同理，可以创建对象的构造器不仅仅有 Object，也可以是 Array，Date，Function等。所以我们也可以构造函数来创建 Array、 Date、Function.

var b = new Array();
b.constructor === Array;
b.__proto__ === Array.prototype;

var c = new Date(); 
c.constructor === Date;
c.__proto__ === Date.prototype;

var d = new Function();
d.constructor === Function;
d.__proto__ === Function.prototype;

var obj = new Object();
obj.constructor === Object
obj.__proto__ === Object.prototype

所有函数对象proto都指向 Function.prototype

这些构造器都是函数对象：

所有函数对象的 proto 都指向 Function.prototype，它是一个空函数（Empty function）

所有对象的 proto 都指向其构造器的 prototype

7，原型链

js 访问对象的原型链条：

当我们访问一个对象的属性时，

JavaScript引擎先在当前对象上查找该属性，

如果没有找到，就通过__proto__ 到其原型对象上找，

如果还没有找到，就继续通过__proto__ 到其原型对象上找，

直到返回null(即找到Object.prototype对象，也就是Object.prototype.__proto__返回null)，最后，如果还没有找到，就只能返回undefined。

例如，创建一个Array对象：
var arr = [1, 3, 5];
//其原型链是：
arr(当前对象) ----> Array.prototype（原型对象） ----> Object.prototype ----> null
//Array.prototype定义了indexOf()、shift()等方法，因此你可以在arr对象上直接调用这些方法。

例如，创建一个方法
function test(){}
//其原型链是：
test ----> Function.prototype ----> Object.prototype ----> null

原型链查找的代码示例

Object.prototype.name = "root";
function Player() {}
Player.prototype.name = "Kevin";

var p1 = new Player();

p1.name = "Daisy";
// 查找p1对象中的name属性，因为上面添加了name，所以会输出“Daisy”
console.log(p1.name); // Daisy

delete p1.name;
// 删除了p1.name，然后查找p1发现没有name属性，就会从p1的原型p1.__proto__中去找，也就是Player.prototype，然后找到了name，输出"Kevin"
console.log(p1.name); // Kevin

delete Player.prototype.name;
// 删除了构造函数上的name属性，再向上查找，查找到Object.prototype上的name属性
console.log(p1.name);   // root

delete Object.prototype.name;
// 删除了Oject上的name属性，Object.prototype 为原型链的终点，最终没有查找到，返回undefined
console.log(p1.name);   // undefined

总结：

• 原型和原型链是JS实现继承的一种模型。
• 原型链的形成是真正是靠__proto__ 而非prototype

作者：Yi罐可乐
链接：https://www.jianshu.com/p/dee9f8b14771
来源：简书