当你被面试问到：你还记得原型和原型链吗？

Yiko
868 阅读6分钟

前言

JavaScript 中的原型和原型链是一个常见但也相对复杂的主题，通常在面试中成为考察开发者深入理解 JavaScript 的关键问题。本文将深入探讨原型和原型链的概念，帮助你了解并学习这个知识点，让如果遇到了这个问题时能够更好地回答。

什么是原型？

在 JavaScript 中，每个对象都有一个关联的原型（prototype）。原型是一个对象，它包含了一组共享属性和方法，可以被其他对象继承。当你尝试访问一个对象的属性或方法时，如果该对象本身没有这些属性或方法，JavaScript 引擎会查找该对象的原型链以寻找这些属性或方法。这样说你可能很难理解，让我们来看一些例子：

示例：原型的构建

function Foo() {
  this.value = 42;
}

Foo.prototype = {
  greet: function () {
    console.log("Hello!");
  },
};

const f1 = new Foo();

在这个示例中，我们创建了一个构造函数 Foo，并为其添加了一个 greet 方法。Foo.prototype 是 Foo 的原型，包含了这个方法。而这个构造函数的原型就是Foo.prototype,Foo.prototype就是包含它的一个对象，这里面可以存在其它的方法，因为它就是一个对象。

如何访问原型？

对象的原型可以通过 prototype 属性来访问。例如，你可以使用 Object.getPrototypeOf(obj)方法返回指定对象的原型，来获取对象 obj 的原型。

function Dog(name) {
  this.name = name;
}

const myDog = new Dog("Buddy");
const prototypeOfMyDog = Object.getPrototypeOf(myDog);

console.log(prototypeOfMyDog === Dog.prototype); // true

什么是原型链？

原型链是一种由对象和它们的原型组成的层级结构。当你试图访问一个对象的属性或方法时，JavaScript 引擎会首先查找该对象本身是否具有这些属性或方法，如果没有，它会沿着原型链向上查找，直到找到或达到原型链的顶端（通常是Object.prototype）。

示例：原型链的工作原理

// 创建一个名为 Animal 的构造函数
function Animal(name) {
  this.name = name;
}

// 为 Animal 的原型添加一个 eat 方法
Animal.prototype.eat = function () {
  console.log(this.name + " is eating.");
};

// 创建一个名为 Cat 的构造函数，它继承自 Animal
function Cat(name) {
  // 使用 Animal 构造函数并传递 name 参数，确保 Cat 对象也有 name 属性
  Animal.call(this, name);
}

// 设置 Cat 的原型为 Animal 的原型，以继承 eat 方法
Cat.prototype = Object.create(Animal.prototype);

// 修复 Cat 的 constructor 属性，以指向 Cat 构造函数
Cat.prototype.constructor = Cat;

// 创建一个名为 fluffy 的 Cat 实例，传递 name 参数为 "Fluffy"
const fluffy = new Cat("Fluffy");

// 调用 fluffy 的 eat 方法，输出 "Fluffy is eating."
fluffy.eat();

这个示例比较长避免看不懂我为每一行都添加了注释，在这个示例中，Cat 继承了 Animal 的 eat 方法。当我们调用 fluffy.eat() 时，JavaScript 引擎首先查找 fluffy 自身是否有 eat 方法，然后沿着原型链找到 Cat.prototype，然后找到 Animal.prototype，最终找到 Animal.prototype.eat 方法，然后执行它。

警告：  上面代码中使用了call来创建构造函数，你们使用时要小心不要使用 call() 来链式调用构造函数（例如，实现继承）。这会将构造函数作为普通函数调用，这意味着 new.target 的值为 undefined，而类会抛出错误，因为它们不能在没有 new 的情况下被调用。请改用 Reflect.construct() 或 extends。

这些函数都可以点击前往MDN查看详细用法，我也是写到才想起来之后可以写一篇文章详细讲一下这个警告。

再深入了解一下完整的原型链

这是一张很经典的原型链图

1183435-20170915105226032-1488063174.jpg

这张图总结一下就是：

  1. Object 和 Function 的角色：

    • Object 和 Function 都是 JavaScript 中的内置构造函数。
    • Object 用于创建对象实例，而 Function 用于创建函数对象。

  2. 构造函数的 __proto__：

    • 所有构造函数（包括 Object 和 Function）都有一个 __proto__ 属性，它指向 Function.prototype。
    • 这表示构造函数本身继承了一些共享的方法，如 call() 和 apply()，因为这些方法存在于 Function.prototype 上。

  3. 原型对象的 __proto__：

    • 所有原型对象的 __proto__ 属性都指向 Object.prototype。
    • 这表明所有对象实例和函数对象的原型都继承了一些基本方法，如 toString() 和 hasOwnProperty()，因为这些方法存在于 Object.prototype 上。

  4. Object.prototype.__proto__ 和原型链终点：

    • Object.prototype.__proto__ 指向 null，表示原型链的终点。
    • 这是原型链的最高级别，没有更高级别的原型，也就是原型链的终点。

  5. 隐式原型和显式原型：

    • 所有对象（包括函数对象和普通对象）都具有一个隐式原型，它指向创建该对象的构造函数的原型，用于继承 属性和方法。
    • 只有函数对象（通过构造函数创建的对象）具有一个显式原型，这个属性被称为 prototype，它指向一个 对象，也被称为原型对象。原型对象包含了所有实例共享的属性和方法，以实现继承和共享。

  6. 原型对象的 constructor 属性：

    • 原型对象具有一个 constructor 属性，指向创建该实例的构造函数，用于标识对象的构造函数。

这样你就找到了整个原型链互相之间的关系，理清整个从头到尾的顺序以及其中的联系，你就彻底理解原型链的整个链级结构了

结尾

原型和原型链是 JavaScript 中的核心概念，深入理解它们对于成为一名熟练的 JavaScript 开发者非常重要。在面试中，这些问题可能会频繁出现，因此掌握这些概念并能够清晰地解释它们的工作原理将有助于你在面试中脱颖而出。继续学习和练习，以更好地掌握这些重要概念。

我还见过这样的几道题，做出来就说明理解了原型和原型链：

__proto__ 是 JavaScript 中的一个特殊属性，它指向对象的原型。每个对象都可以有一个 __proto__ 属性，它引用了对象的原型，即定义该对象的构造函数的 prototype 属性。通过 __proto__，你可以访问并继承原型链上的属性和方法。判断下面输出true or false吧

// 难度小
console.log(Foo.prototype.constructor === Foo) // ?
console.log(f1.__proto__ === Foo.prototype) // ?

// 难度中
console.log(Object.prototype.__proto__ === null) // ?
console.log(Function.prototype.__proto__ === Object.prototype) // ?

// 难度较大
console.log(Function.prototype === Object.__proto__) // ?

让我们逐个解释这些表达式的结果：

  1. console.log(Foo.prototype.constructor === Foo)

    结果是 true。

    这是因为 Foo.prototype 的 constructor 属性默认指向 Foo 函数自身。所以，Foo.prototype.constructor 是 Foo，因此表达式为真。

  2. console.log(f1.__proto__ === Foo.prototype)

    结果是 true。

    __proto__ 是非标准属性，但在现代浏览器中广泛支持，它指向对象的原型。 f1.__proto__ 指向 f1 的原型，而 Foo.prototype 也指向 Foo 的原型，因此这两者相等。

  3. console.log(Object.prototype.__proto__ === null)

    结果是 true。

    Object.prototype 是原型链的顶端，它的 __proto__ 指向 null。这表示没有更高层次的原型，所以表达式为真。

  4. console.log(Function.prototype.__proto__ === Object.prototype)

    结果是 true。

    在 JavaScript 中，Function.prototype 是函数对象的原型，它继承自 Object.prototype。因此，Function.prototype.__proto__ 指向 Object.prototype，所以表达式为真。

  5. console.log(Function.prototype === Object.__proto__)

    结果是 true。

    这是因为 Function.prototype 和 Object.__proto__ 都指向相同的对象，即 Object.prototype。它们都继承自相同的原型对象，所以表达式为真。

    如果你想了解更多这类文章，点赞关注作者更新更多后续~

    更多推荐→# 当你被面试问到: 你了解过ES module 吗？

avatar
文章
阅读
粉丝