17370845950

JavaScript原型链是对象查找属性时实际遵循的隐式[[Prototype]]引用路径，从对象开始逐级向上直至null；class继承和ES5手动继承均依赖此机制实现方法共享与实例属性继承。

JavaScript 原型链的本质是什么？

原型链不是语法糖，而是 JavaScript 对象查找属性和方法时实际走的路径：每个对象内部都有一个隐式引用 [[Prototype]]（可通过 Object.getPrototypeOf(obj) 读取），它指向另一个对象；当访问一个属性时，如果当前对象没有，引擎就顺着这个引用一路向上查找，直到找到或抵达 null（即 Object.prototype.__proto__ === null）。

关键点在于：function 的 prototype 属性只在用 new 调用时才参与对象创建——它会被赋给新对象的 [[Prototype]]，而普通对象没有 prototype 属性，只有 __proto__（或 Object.getPrototypeOf()）。

用 class 实现继承时原型链怎么连？

class 是语法糖，底层仍靠原型链。使用 extends 后，子类构造函数的 prototype 会自动链接到父类的 prototype，同时子类自身也通过 __proto__ 链接到父类构造函数（实现静态方法继承）。

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() { return `${this.name} barks`; }
}

const dog = new Dog('Buddy', 'Golden');
// dog.__proto__ === Dog.prototype
// Dog.prototype.__proto__ === Animal.prototype
// Animal.prototype.__proto__ === Object.prototype
// Object.prototype.__proto__ === null

• 必须在子类 constructor 中调用 super()，否则 this 不可用
• Dog.prototype 上的方法（如 bark）不会出现在 Animal.prototype 上，但可通过原型链访问 speak
• 若手动修改 Dog.prototype，需确保 constructor 指回 Dog，否则 dog.constructor === Animal

手动设置原型链实现继承（ES5 风格）

核心是两步：让子类实例能访问父类原型上的方法（改 Child.prototype 的 [[Prototype]]），同时让子类构造函数能调用父类初始化逻辑（在 Child 内部用 Parent.call(this, ...)）。

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 继承实例属性
  this.breed = breed;
}

// 关键：重设 Dog.prototype 的原型为 Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复 constructor

Dog.prototype.bark = function() {
  return `${this.name} barks`;
};

• Object.create(Animal.prototype) 创建一个空对象，其 [[Prototype]] 指向 Animal.prototype，比直接赋值 { __proto__: Animal.prototype } 更规范
• 漏掉 Dog.prototype.constructor = Dog 会导致 new Dog().__proto__.constructor === Animal，影响 instanceof 和调试识别
• 不能用 Dog.prototype = Animal.prototype，否则修改 Dog.prototype 会污染 Animal.prototype

为什么 instanceof 和 isPrototypeOf() 有时行为不一致？

instanceof 检查的是「右侧构造函数的 prototype 是否在左侧对象的原型链上」；isPrototypeOf() 检查的是「左侧对象是否在右侧对象的原型链上」。两者方向相反，且 instanceof 依赖构造函数的 prototype 属性值，而非运行时对象的实际 [[Prototype]]。

常见陷阱：

• 如果重写了 Child.prototype 但忘了恢复 constructor，instanceof 仍正常，但 obj.constructor 指向错误
• 动态替换原型后（如 obj.__proto__ = NewProto），instanceof 不会更新，因为它只看初始构造关系
• Array.isArray() 比 arr instanceof Array 更可靠，因为后者在跨 iframe 场景下会失效（不同全局环境的 Array 构造函数不同）

原型链不是黑盒，它是可观察、可调试的路径；真正容易出错的，往往不是“怎么连”，而是“什么时候被意外断开”或者“谁在中间悄悄改了 __proto__”。