JavaScript原型链是什么及继承原理解析

JavaScript原型链是其面向对象机制的底层核心，通过对象内部的[[Prototype]]隐式引用逐级向上查找属性和方法，形成一条最终指向null的链接路径；它不仅解释了为何普通对象能调用toString等内置方法，更支撑着从构造函数继承到ES6 class的所有继承行为——看似简洁的class语法背后，实则是精心编排的原型链操作；掌握它，才能穿透语法糖表象，真正理解JavaScript中“继承”的本质、规避共享引用等常见陷阱，并写出更可靠、可维护的面向对象代码。

JavaScript 中的原型链是对象继承的核心机制，它决定了一个对象如何查找属性和方法。每个对象内部都有一个隐式引用（[[Prototype]]），指向它的原型对象；而这个原型对象本身也可能有原型，层层向上，直到最终指向 null——这条链接起来的链条就是原型链。

原型链的本质：属性查找路径

当访问一个对象的属性时，JavaScript 引擎会按以下顺序查找：

• 先在对象自身上查找该属性；
• 如果没找到，就去它的 [[Prototype]]（即 __proto__ 或 Object.getPrototypeOf() 返回的对象）上找；
• 如果原型上也没有，就继续查原型的原型，一直向上；
• 直到找到该属性，或到达原型为 null 的顶层（通常是 Object.prototype）为止。

例如：{}.toString() 能调用成功，是因为普通对象自身没有 toString，但它的原型是 Object.prototype，而后者定义了这个方法。

构造函数与 prototype 属性的关系

函数对象有一个显式的 prototype 属性（仅对函数有效），它是一个对象，会被自动赋给用该函数创建的实例的 [[Prototype]]。

比如：

function Person(name) { this.name = name; }
Person.prototype.sayHello = function() { return 'Hi, I am ' + this.name; };

const p = new Person('Alice');
console.log(p.sayHello()); // 'Hi, I am Alice'

这里 p.__proto__ === Person.prototype，所以 p 可以通过原型链访问到 sayHello。

原型链如何实现继承

继承的本质，就是让子类型的实例能访问父类型的属性和方法，这通过控制原型链来实现：

• 将子构造函数的 prototype 指向父构造函数的一个实例（经典寄生组合式继承中常用 Object.create(Parent.prototype)）；
• 这样子类实例的 [[Prototype]] 链就会包含父类的 prototype，从而获得其方法；
• 同时保留自己的构造器信息（需手动修复 constructor）。

ES6 的 class 语法只是语法糖，底层仍是基于原型链的继承机制：extends 实际设置的就是子类 prototype 的原型为父类 prototype。

常见陷阱与注意事项

原型链虽简洁，但容易引发误解：

• 修改原型上的引用类型属性（如数组、对象），会影响所有共享该原型的实例；
• instanceof 和 isPrototypeOf() 判断依赖原型链，而非构造函数本身；
• 箭头函数没有 prototype，不能用作构造函数；
• Object.create(null) 创建的对象没有原型，因此不继承任何内置方法（如 toString）。

理解原型链，才能真正掌握 JavaScript 的面向对象行为，而不是只停留在 class 表面。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript原型链是什么及继承原理解析》文章吧，也可关注golang学习网公众号了解相关技术文章。