JavaScript原型链继承原理详解

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript原型链如何实现继承机制》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript原型链本质是对象__proto__指向构造函数prototype的真实查找路径，引擎按obj→obj.__proto__→上层原型逐级读取属性，写入则始终作用于对象自身。

JavaScript 原型链的本质是对象的 __proto__ 指向其构造函数的 prototype

这不是“语法糖”或设计模式，而是 JS 引擎查找属性时的真实路径。当你访问 obj.method()，引擎先在 obj 自身找，没找到就去 obj.__proto__（即 Constructor.prototype）里找，再没找到就继续向上——这就是原型链。

关键点：

• __proto__ 是每个对象都有的内部属性（已不推荐直接使用，但理解它必不可少）
• prototype 是只有函数才有的属性，用于被实例的 __proto__ 指向
• Object.getPrototypeOf(obj) 是读取原型的标准方式；Object.setPrototypeOf() 是修改原型的唯一安全方式
• 所有函数的 prototype 默认带一个 constructor 属性，指向该函数本身——但它只是个普通属性，可被覆盖或删除，不参与查找逻辑

用 class 写继承，底层仍是原型链操作

ES6 的 class 只是语法包装，extends 并没有引入新机制。Babel 编译后，它依然靠 Object.setPrototypeOf(Sub.prototype, Super.prototype) 和 Super.call(this) 实现。

常见误区：

• 写 class B extends A 后，B.prototype.__proto__ === A.prototype 为 true，但 B.__proto__ !== A（构造函数之间无继承关系）
• super() 必须在子类 constructor 中调用，否则 this 未初始化，会报 ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
• 静态方法不会被继承到实例上，但可通过 B.__proto__.staticMethod() 访问（因为 B.__proto__ === A）

手动模拟继承时，Object.create() 比直接赋值 __proto__ 更可靠

直接改 __proto__ 有性能隐患，且部分环境（如严格模式下的某些旧引擎）不支持。正确做法是用 Object.create() 创建干净原型对象。

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + ' makes a sound');
};

function Dog(name, breed) {
  Animal.call(this, name); // 继承实例属性
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // 继承原型方法
Dog.prototype.constructor = Dog; // 修复 constructor

const dog = new Dog('Leo', 'Golden');
dog.speak(); // Leo makes a sound

注意：

• 必须在 Object.create(Animal.prototype) 后重设 Dog.prototype.constructor，否则它会指向 Animal
• 不能写 Dog.prototype = Animal.prototype——这会让两个类共享同一原型对象，修改 Dog.prototype 会意外影响 Animal
• 如果父类原型上有引用类型属性（如 arr: []），直接继承会导致所有实例共用该数组，应避免在 prototype 上定义可变状态

判断继承关系别只用 instanceof，要结合 isPrototypeOf() 和 Object.getPrototypeOf()

instanceof 看起来方便，但它依赖 constructor.prototype，一旦原型链被篡改或 constructor 被覆盖就失效。更底层、更稳定的方式是检查原型是否在链中：

• Animal.prototype.isPrototypeOf(dog) → true（明确表达“Animal.prototype 是否是 dog 的原型”）
• Object.getPrototypeOf(dog) === Dog.prototype → true
• Object.getPrototypeOf(Object.getPrototypeOf(dog)) === Animal.prototype → true
• dog instanceof Dog 和 dog instanceof Animal 都为 true，但前者只说明 Dog.prototype 在链中，不保证是直接原型

真正容易被忽略的是：原型链查找只发生在「读取属性」时；写入属性永远作用于对象自身，哪怕同名属性已在原型上存在。这也是为什么你给 dog.speak = ... 后，再调用 dog.speak() 就不再走原型上的方法了。

理论要掌握，实操不能落！以上关于《JavaScript原型链继承原理详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！