JavaScript原型链

1. 原型链是什么?

了解原型链，首先搞清楚下面3个关键词：

prototype：每个函数对象都有一个prototype原型对象。

__proto__：每个对象都有这个属性，这个属性指向的是对应构造函数的prototype，和书中的[[prototype]]意义相同。

constructor：这个属性指向的构造函数。

原型链是JavaScript中主要的继承方式，而原型链就是实例对象与原型对象的关系。

当使用对象中某属性或者方法时，首先会在自身查找，如果自身并没有该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的prototype中调用查找。

贴个存了好久的资料和代码：

// 构造函数
function Foo(y) {
     
	this.y = y;
}
Foo.prototype.x = 10;
Foo.prototype.calculate = function (z) {
     
	return this.x + this.y + z;
};
var b = new Foo(20);
var c = new Foo(30);
// 调用继承方法
b.calculate(30);  // 60
c.calculate(40);  // 80
// 其中的关系
console.log(b.__proto__ === Foo.prototype) // true
console.log(c.__proto__ === Foo.prototype) // true
console.log(b.constructor === Foo) // true
console.log(c.constructor === Foo) // true
console.log(Foo.prototype.constructor === Foo) // true
console.log(Foo.prototype.__proto__ === Object.prototype) // true
console.log(Foo.__proto__ === Function.prototype) // true

2. 常用方法

2.1 通过isPrototypeOf确定对象之间的关系

function Student() {
     }
Student.prototype.name = '小明'
Student.prototype.age = 18
Student.prototype.show = function() {
      console.log(`我叫${
       this.name}`) }

let a = new Student()
let b = {
     }
console.log(Student.prototype.isPrototypeOf(a)) // true
console.log(Student.prototype.isPrototypeOf(b)) // false

2.2 通过Object.getPrototypeOf方法获取对象中的原型

function Student() {
     }
Student.prototype.name = '小明'
Student.prototype.age = 18
Student.prototype.show = function() {
      console.log(`我叫${
       this.name}`) }

let a = new Student()
console.log(Object.getPrototypeOf(a)) // {name: "小明", age: 18, show: ƒ, constructor: ƒ}

2.3 通过Object.setPrototypeOf可以向实例的原型对象中写入一个值

不推荐使用，引用红宝石第四版中的一段话

警告 Object.setPrototypeOf()可能会严重影响代码性能。Mozilla 文档说得很清楚：“在所有浏览器和 JavaScript 引擎中，修改继承关系的影响都是微妙且深远的。这种影响并不仅是执行 Object.setPrototypeOf()语句那么简单，而是会涉及所有访问了那些修改过[[Prototype]]的对象的代码。”

2.4 通过Object.create创建对象，指定原型

let a = {
     
	name: '小明',
	age: 18
}
let b = Object.create(a)

console.log(a.isPrototypeOf(b)) // true 
console.log(Object.getPrototypeOf(b)) // {name: "小明", age: 18}

2.5 通过hasOwnProperty确定属性在实例还是原型对象上

可以通过hasOwnProperty确定属性或方法在实例还是原型对象上

function Student() {
     }
Student.prototype.name = '小明'
Student.prototype.age = 18
Student.prototype.show = function() {
      console.log(`我叫${
       this.name}`) }

let a = new Student()
let b = new Student()
a.name = '小红'
console.log(a.hasOwnProperty('name')) // true 来自实例
console.log(b.hasOwnProperty('name')) // false 来自原型