原型与原型链

什么是原型#

在 JavaScript 中，每个对象都有一个内部属性 __proto__，这个属性指向另一个对象，这个对象就是该对象的原型。通过原型，对象可以继承原型对象的属性和方法。类似于 lua 中的元表（metatable）。

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

准确地说，这些属性和方法定义在Object的构造器函数（constructor functions）的 prototype 属性上，而不是直接定义在对象本身上。

1
function doSomething() {}
2
console.log(doSomething.prototype.constructor === doSomething); // true
3
const obj = new doSomething();
4
console.log(obj.__proto__ === doSomething.prototype); // true

可以看到，原型对象有一个自有属性 constructor，这个属性指向该构造函数本身。

什么是原型链#

原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种层层相连的原型对象就形成了所谓的“原型链”（prototype chain）。

在对象实例和它的构造器之间建立一个链接（它是 __proto__ 属性，是从构造函数的 prototype 属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。

原型链的顶端是 Object.prototype，它的原型是 null。这意味着所有对象最终都继承自 Object.prototype。

函数本身也是一种对象，所以函数也有自己的也有 __proto__ 属性，它指向 Function.prototype，而 Function.prototype 的原型又是 Object.prototype。

1
function doSomething() {}
2
console.log(doSomething.__proto__ === Function.prototype); // true
3
console.log(Function.prototype.__proto__ === Object.prototype); // true
4
console.log(Object.prototype.__proto__ === null); // true

1
doSomething
2
    ↓ (__proto__)
3
Function.prototype
4
    ↓ (__proto__)
5
Object.prototype
6
    ↓ (__proto__)
7
null

特别的: `Function.proto` 与 `Object.proto`#

1
console.log(Object instanceof Function); // true
2
console.log(Function instanceof Object); // true

二者都返回 true 说明:

Object 是由 Function 构造的（因为 Object 是函数）
Function 也是由 Object 构造的（因为 Function 是对象）

所以 Object 和 Function 之间形成了一个循环引用。

分析:

Function.__proto__ 指向 Function.prototype 因为 Function 是一个函数
Object.__proto__ 指向 Function.prototype 因为 Object 是一个函数。

1
console.log(Function.__proto__ === Function.prototype); // true
2
console.log(Object.__proto__ === Function.prototype); // true

于是整个原型链如下:

1
console.log(Function.__proto__ === Function.prototype); // true
2
console.log(Object.__proto__ === Function.prototype); // true
3
console.log(Function.prototype.__proto__ === Object.prototype); // true
4
console.log(Object.prototype.__proto__ === null); // true

1
Function ──────┐
2
               ↓ (__proto__)
3
Object ────→ Function.prototype
4
               ↓ (__proto__)
5
             Object.prototype
6
               ↓ (__proto__)
7
             null

实现 instanceof#

instanceof 运算符用于检测构造函数的 prototype 属性是否存在于某个实例对象的原型链上。

1
function instanceOf(instance, constructor) {
2
  if (
3
    (typeof instance !== "object" && typeof instance !== "function") ||
4
    instance === null
5
  ) {
6
    return false; // 基础类型直接返回 false
7
  }
8
  let proto = Object.getPrototypeOf(instance); // 获取实例的原型
9
  const prototype = constructor.prototype; // 获取构造函数的原型
10

11
  while (proto !== null) {
12
    if (proto === prototype) {
13
      return true;
14
    }
15
    proto = Object.getPrototypeOf(proto);
16
  }
17
  return false;
18
}
19

20
console.log(instanceOf([], Array)); // true
21
console.log(instanceOf([], Object)); // true
22
console.log(instanceOf({}, Array)); // false
23
console.log(instanceOf(function () {}, Function)); // true
24
console.log(instanceOf(function () {}, Object)); // true
25
console.log(instanceOf(null, Object)); // false

总结#

所有函数（包括 Object）都是 Function 的实例，因此它们的 __proto__ 都指向 Function.prototype。所有对象（包括 Function）都是 Object 的实例，因此它们的 __proto__ 都指向 Object.prototype。 Function.prototype 的原型是 Object.prototype，而 Object.prototype 的原型是 null。

什么是原型#

什么是原型链#

特别的: Function.__proto__ 与 Object.__proto__#

实现 instanceof#

总结#

特别的: `Function.proto` 与 `Object.proto`#