【JS】原型与原型链的个人总结

总结了下JavaScript的原型与原型链。

• 所有引用类型都有一个__proto__属性
• 所有函数都有一个prototype属性，并且只有函数有，该属性指向的是一个有constructor属性的对象，其中constructor指向该函数（顾名思义指向构造函数）
• 所有引用类型的__proto__属性指向它构造函数的prototype，即instance.__proto__ === Constructor.prototype，一经创建默认为这样

在JavaScript对象中，每当定义一个对象的时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype属性，这个属性指向函数的原型对象。
每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性。

两种原型继承方式

显式继承

1. Object.setPrototypeOf(obj, prototype)
2. obj = Object.create(prototype)
   都是将obj.__proto__设置为prototype
   兜底的.__proto__是Object.prototype，再往上就是null了

隐式继承

构造函数调用时会发生（《你不知道的JavaScript（上）》）：

1. 创建一个新对象；
2. 添加[[prototype]]连接；
3. 这个新对象会绑定到函数调用的this；
4. 如果函数没有返回其他对象，返回这个新对象。

原型链

__proto__和Object.getPrototypeOf(target)：对象的原型
__proto__是对象实例和它的构造函数之间建立的链接，它的值是：构造函数的prototype。
注：__proto__为内部属性，不是正式的对外的API。应使用：Object.getPrototypeOf(target)（读操作）、Object.setPrototypeOf(target)（写操作）、Object.create(target)（生成操作）。

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

当调用某种方法或属性中，首先会在自身查找和调用，如果自身并没有该属性或方法，则会去它的__proto__属性中查找调用，也就是它的构造函数的prototype中查找调用。
当获取 person.constructor 时，其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，所以：

person.constructor === Person.prototype.constructor

一个对象是否在另一个对象的原型链上

1. instanceof
   测试构造函数的prototype属性是否出现在对象的原型链中的任何位置
2. isPrototypeOf
   一个对象是否在另一个对象的原型链上

好图共赏

由上图的个人总结

一切没指定原型的构造函数的__proto__指向Function.prototype
而Function.prototype指向Object.prototype
Function instanceof Function === true
Object instanceof Object === true

个人猜测

Object.prototype是一个预设好的js对象

参考

【THE LAST TIME】一文吃透所有JS原型相关知识点
深入理解 JavaScript 原型
javascript——原型与原型链