图解 js 原型链

参考 JavaScript 高级程序设计（第四版）

参考 https://chamikakasun.medium.com/javascript-prototype-and-prototype-chain-explained-fdc2ec17dd04

# 一、为什么需要原型？

假设我们代码里需要新建一个 person 对象

let person = {}
person.name = 'Leo'
person.age = 20
person.eat = function () {
  console.log(`${this.name} is eating.`)
}
person.sleep = function () {
  console.log(`${this.name} is sleeping.`)
}

1
2
3
4
5
6
7
8
9

看起来没啥问题

假设我们需要多个 person 对象呢？你可能想到了，用工厂函数

function createPerson(name, age) {
  let person = {}
  person.name = name
  person.age = age
  person.eat = function () {
    console.log(`${this.name} is eating.`)
  }
  person.sleep = function () {
    console.log(`${this.name} is sleeping.`)
  }
  return person
}

// 工厂函数批量生成person对象
const person1 = createPerson('Mike', 23)
const person2 = createPerson('Alis', 34)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

工厂函数解决了批量生成的问题，但是如果业务代码中需要对同一类 person 做某种操作，问题出现了

不能判断 person1 和 person2 同一种类型，因为 person1 和 person2 没有任何关联。

或者你也可以用构造函数模式

function Person(name, age) {
  this.name = name
  this.age = age
  this.eat = function () {
    console.log(`${this.name} is eating.`)
  }
  this.sleep = function () {
    console.log(`${this.name} is sleeping.`)
  }
}

const person1 = new Person('Mike', 23)
const person2 = new Person('Alis', 34)

1
2
3
4
5
6
7
8
9
10
11
12
13

Person()构造函数代替了 createPerson()工厂函数。实际上，Person()内部的代码跟 createPerson()基本是一样的，只是有如下区别。

没有显式地创建对象。
属性和方法直接赋值给了 this。
没有 return。

而反过来这三点正是 new 关键字所做的事。

使用 new 操作符调用构造函数会将新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性

这步操作就标识了 person 实例对象类型为 Person

person1 instanceof Person // true
person2 instanceof Person // true

1
2

标识问题完美解决了！

构造函数虽然有用，但也不是没有问题。它主要问题在于，其定义的方法会在每个实例上都创建一遍。

如果需要创建几万个 person，那么将会创建几万个 sleep 和 eat 方法。 😵‍💫😵😵‍💫

# 二、原型模式

为了解决上述问题，Javascript 引入了原型模式。

每个函数都会创建 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例 共享的属性和方法。

原来在构造函数中直接赋给对象实例的值或方法，可以直接赋值给它们的原型

function Person(name, age) {
  this.name = name
  this.age = age
}

Person.prototype.eat = function () {
  console.log(`${this.name} is eating.`)
}
Person.prototype.sleep = function () {
  console.log(`${this.name} is sleeping.`)
}

let person1 = new Person()
let person2 = new Person()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

这样 person 的原型定义的属性和方法可以被对象实例共享,不管创建多少个 person 对象， sleep 和 eat 方法永远只创建一次。

console.log(person1.eat == person2.eat) // true
console.log(person1.sleep == person2.sleep) // true

1
2

生成的实例是怎么和 Person 构造函数关联呢？ ‘__proto__’

这里可以看到 chrome devtool 里显示的是 [[Prototype]]， proto 是一个获取 [[Prototype]] 内部插槽值的 getter/setter，出于兼容性原因而存在。

引入 prototype 后， prototype、构造函数 Person、实例对象 person 之间的关系如下图：

为了让多个实例的情况更加清晰，我们 new 两个对象

let Alex = new Person('Alex', 24)
let Bob = new Person('Bob', 25)

1
2

他们的原型关系图如下

我们回顾一下原型模式做了些什么：

当我们创建一个函数时，JavaSctipt 引擎会自动为该函数创建一个 prototype 对象，并将原型属性添加到可用于访问该 Prototype 对象的 Function 对象，并添加指向 Function 对象的构造函数属性 constructor。
然后当我们从 Function 对象创建实例时，JavaScript 引擎再次将 getter/setter（即 __proto__）添加到对象的实例中，可用于访问 Function 对象的相同原型对象。
构造函数的这个 prototype 对象在使用构造函数创建的所有对象之间共享。我们可以将方法和属性添加到这个原型对象中，然后这些方法和属性将自动可供其构造函数的实例使用。