JavaScript原型链是什么？如何用原型继承？

JavaScript原型链是对象属性查找的隐式路径，通过__proto__与prototype的层层链接实现继承，既是语言底层的核心机制，也是class语法糖的真正基础；文章深入解析了原型链的构成原理、用Object.create安全实现构造函数继承的最佳实践，以及ES6 class背后如何自动处理原型关系，并提醒避开直接赋值原型、污染Object.prototype等常见陷阱——掌握它，不仅能写出更健壮的继承代码，更能真正理解JavaScript运行时的本质。

JavaScript 中的原型链是对象查找属性和方法时遵循的一条隐式连接路径，它让对象可以共享和继承其他对象的特性。每个对象内部都有一个指向其原型对象的链接（通常通过 __proto__ 访问），而原型对象本身也可能有原型，这样层层向上就构成了“原型链”。当访问一个对象的属性时，JavaScript 引擎会先在该对象自身查找；没找到就沿着 __proto__ 去它的原型上找，一直追到 Object.prototype（它的 __proto__ 是 null），链就结束了。

原型链的核心机制

所有函数（包括构造函数）都有一个 prototype 属性，它是一个对象，用于被实例对象的 __proto__ 所指向。当你用 new Fn() 创建实例时，该实例的 __proto__ 会自动指向 Fn.prototype。这个绑定是实现继承的基础。

• Function.prototype 是所有函数的原型，它的 __proto__ 指向 Object.prototype
• Object.prototype.__proto__ === null，这是原型链的终点
• Array、Date 等内置构造函数也遵循同样规则，它们的实例原型最终都连到 Object.prototype

用原型实现经典继承（构造函数 + prototype）

最基础的方式是把父类的实例方法挂到父构造函数的 prototype 上，再让子构造函数的 prototype 指向父类的一个实例（或更推荐地，用 Object.create(Parent.prototype)），最后修正子类的 constructor 指回自身。

• 定义父构造函数，并在其 prototype 上添加方法：
  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;
• 给子类添加独有方法：
  Dog.prototype.bark = function() { console.log(this.name + ' barks!'); };

ES6 class 语法背后的原型继承

class 只是语法糖，底层仍是基于原型链。使用 extends 和 super() 本质上就是在设置原型关系并调用父构造函数。

• class Dog extends Animal 等价于手动设置 Dog.prototype.__proto__ === Animal.prototype
• super() 在子类构造器中调用父类构造函数，确保 this 正确初始化
• 子类方法写在 class 内部，最终都会被添加到 Dog.prototype 上

注意事项与常见陷阱

直接赋值 Child.prototype = Parent.prototype 是错误的，会导致修改子类原型影响父类；用 new Parent() 当子类原型可能触发父类副作用（比如执行初始化逻辑）。推荐始终使用 Object.create(Parent.prototype)。

• 避免污染 Object.prototype —— 给它加属性会影响所有对象，极易引发冲突
• 检查属性是否为自有属性，可用 obj.hasOwnProperty('prop') 或 Object.prototype.hasOwnProperty.call(obj, 'prop')
• 现代开发中优先使用 class + extends，语义清晰且不易出错；理解原型链是为了调试和深入掌握 JS 机制

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。