Hoey

外观

对象与原型

约 714 字大约 2 分钟

2025-02-03

原型与原型链

思考

  1. 原型与原型链是什么？

原型

每个 JavaScript 对象（除 Object.create(null) 创建的）都有一个内部属性 [[Prototype]]，指向它的原型对象。原型对象也是一个普通对象，它包含可以被其他对象共享的属性和方法。

  • 在 ES5 中，可以通过 Object.getPrototypeOf(obj) 获取对象的原型。
  • 在 ES6 中，可以通过 obj.__proto__ 直接访问对象的原型（不推荐在生产环境中使用）。

对象与原型

console
Click the run button to execute the code ...

在上面的例子中，student 对象继承了 person 对象的 greet 方法。

在 JavaScript 中，函数也是对象，每个函数都有一个 prototype 属性。它是一个对象，让某一个构造函数实例化的所有对象都能够访问到原型中的属性和方法。

任何函数（箭头函数除外）都可以作为构造函数使用，当使用 new 关键字调用构造函数时，实例的 __proto__ 指向构造函数的 prototype 属性。

构造函数与原型

console
Click the run button to execute the code ...

原型链

1. 属性查找机制

当访问对象的属性时，JavaScript 引擎会：

    1. 先在对象自身查找；
    1. 若未找到，则沿 __proto__ 向上查找；
    1. 一直查到 Object.prototype；
    1. 若仍未找到，返回 undefined。

这个 从对象到 Object.prototype 的链式结构 就是 原型链。

2. 原型链示例

原型链

console
Click the run button to execute the code ...

总结

  1. 不要滥用 __proto__：性能较差，推荐使用 Object.getPrototypeOf() 和 Object.setPrototypeOf()。
  2. 修改原型影响所有实例：
    Dog.prototype.run = function () {
  console.log("running");
};
dog.run(); // 新增方法立即生效
  3. ES6 Class 本质仍是原型：
    class Cat {
  meow() {}
}
// 等价于
function Cat() {}
Cat.prototype.meow = function () {};
  • 原型：每个对象都有一个原型对象，用于共享属性和方法。
  • 原型链：通过原型链，对象可以访问其原型链上的属性和方法。
  • 构造函数：通过构造函数的 prototype 属性，可以为实例对象提供共享的属性和方法。
  • 继承：原型链是实现 JavaScript 继承的基础。

拓展阅读：

编码与实现-函数实例， 编码与实现-函数的方法