原型链（prototype chain）是 JavaScript 中实现对象属性继承的一种机制。

每个对象（除 null 外）都有一个内部属性 [[Prototype]]（可通过 __proto__ 访问），指向其原型对象。原型对象自身也可能有原型，形成链式结构，最终指向 Object.prototype（其原型为 null）。

当我们访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript 引擎会沿着原型链向上查找，直到找到属性或者到达原型链的顶端。这样就实现了属性的继承。

通过原型链，我们可以重复使用已有的对象的属性和方法，而不需要每个对象都复制一份。这样可以节省内存，也方便了对象的属性和方法的更新和维护。

例子：

// 创建一个原型对象
const myPrototype = {
  greet: function () {
    console.log("Hello!");
  },
};
// 创建一个对象，其原型为 myPrototype
const myObject = Object.create(myPrototype);
// 调用 myObject 的 greet 方法
myObject.greet(); // 输出 "Hello!"

二、确定原型链指向

我们可以使用 Object.create() 方法来根据一个原型创建一个对象，也可以使用使用 __proto__、 Object.setPrototypeOf()属性动态改变一个的对象的原型链。

Person.prototype = {
  constructor: Person, // 修正 constructor 指向
  gender: "unknown",
  getInfo() {
    return `${this.name}, ${this.gender}`;
  },
};

const eve = new Person("Eve");
console.log(eve.getInfo()); // Eve, unknown

或者：

const animal = { type: "unknown" };
const dog = Object.create(animal);
dog.name = "Buddy";

console.log(dog.type); // unknown（来自原型）

三、往原型链中添加属性和方法

我们可以通过修改原型对象的属性和方法来实现对原型链的扩展。

// 添加一个计算数组总和的方法
Array.prototype.sum = function () {
  return this.reduce((acc, curr) => acc + curr, 0);
};
// 添加一个属性（不推荐，容易被修改或遍历到）
Array.prototype.lastElement = null;

// 使用
const arr = [1, 2, 3];
arr.lastElement = 3; // 需要手动维护

console.log(arr.sum()); // 输出: 6
console.log(arr.lastElement); // 输出: 3

也可以使用 es6 的 getter 和 setter 来实现对原型链的扩展。

// 添加一个动态获取最后一个元素的属性
Object.defineProperty(Array.prototype, "last", {
  get() {
    return this[this.length - 1];
  },
  set(value) {
    this[this.length - 1] = value;
  },
  enumerable: false, // 避免被 for-in 遍历到
});

// 使用
const arr = [1, 2, 3];
console.log(arr.last); // 输出: 3
arr.last = 4;
console.log(arr); // 输出: [1, 2, 4]

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24