JavaScript 原型链是 JavaScript 面向对象编程的核心机制，通过内部链接实现属性继承与共享。文章解析了原型链基本定义、关键术语及查找终点，阐述属性查找过程与完整继承体系。涵盖 ES6 Class 语法糖原理、实际开发中的应用如框架扩展与 Polyfill 实现，对比内存优化与性能差异。提供面试常见问题解答，包括 new 操作符、继承实现方式及 Object.create 区别，并给出最佳实践建议，强调避免污染内置原型及使用组合优于复杂继承。掌握原型链有助于深入理解框架底层、编写高效代码及调试属性来源。
在 JavaScript 的世界里，原型链是一个"既熟悉又陌生"的概念。很多开发者知道它的存在，却很少直接操作它。然而，原型链是 JavaScript 面向对象编程的基石，理解它不仅能帮助你通过面试，更能让你深入理解 JavaScript 的设计哲学。
原型链是 JavaScript 中实现继承和共享属性的机制。每个对象都有一个内部链接指向它的原型（通过 __proto__ 或 [[Prototype]]），当访问对象的属性时，如果对象自身没有该属性，就会沿着原型链向上查找，直到找到属性或到达链的末端（null）。
// 混淆点澄清
function Person() {}
const p = new Person();
// 易混淆的三个概念：
console.log(p.__proto__); // Person.prototype
console.log(Person.prototype); // 构造函数的原型对象
console.log(Person.__proto__); // Function.prototype
// 正确的关系：
// p.__proto__ === Person.prototype
// Person.prototype.__proto__ === Object.prototype
// Object.prototype.__proto__ === null
任意对象 → Object.prototype → null ↑ └── 原型链查找的终点
const obj = { name: '小明' };
// 查找 obj.toString() 的过程：
// 1. 检查 obj 自身是否有 toString 属性 ❌
// 2. 检查 obj.__proto__ (Object.prototype) ✅ 找到！
// 3. 调用 Object.prototype.toString()
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function() {
console.log(`${this.name}正在吃`);
};
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}在叫：汪汪！`);
};
const myDog = new Dog('旺财', '柯基');
// 原型链结构：
// myDog → Dog.prototype → Animal.prototype → Object.prototype → null
// ES6 Class 写法
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}`);
}
}
// 等价于 ES5 写法
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, ${this.name}`);
};
// 验证
const p1 = new Person('Alice');
console.log(p1.sayHello === Person.prototype.sayHello); // true
// ES6
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
}
// Babel 编译后的 ES5 代码
function _inherits(subClass, superClass) {
subClass.prototype = Object.create(
superClass && superClass.prototype,
{
constructor: {
value: subClass
}
}
);
if (superClass) {
Object.setPrototypeOf
? Object.setPrototypeOf(subClass, superClass)
: (subClass.__proto__ = superClass);
}
}
// Vue 2 的实例方法
Vue.prototype.$nextTick = function(fn) {
return nextTick(fn, this);
};
Vue.prototype.$set = set;
Vue.prototype.$delete = del;
// 使用
export default {
mounted() {
this.$nextTick(() => {
// DOM 更新后执行
});
}
};
// Lodash 风格的工具函数
function _() {
if (!(this instanceof _)) return new _( ...arguments);
this.__wrapped__ = arguments[0];
}
// 链式调用支持
_.prototype.chain = function() {
this.__chain__ = true;
return this;
};
// 取值
_.prototype.value = function() {
return this.__wrapped__;
};
// Array.prototype.includes 的 Polyfill
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function(searchElement, fromIndex) {
// 实现逻辑...
},
writable: true,
configurable: true
});
}
// ❌ 方法定义在构造函数内（浪费内存）
function Person(name) {
this.name = name;
this.sayHello = function() {
console.log(`Hello, ${this.name}`);
};
}
// 创建 1000 个实例
const people1 = [];
for (let i = 0; i < 1000; i++) {
people1.push(new Person(`Person${i}`));
}
// 内存中有 1000 个 sayHello 函数
// ✅ 方法定义在原型上（节省内存）
function BetterPerson(name) {
this.name = name;
}
BetterPerson.prototype.sayHello = function() {
console.log(`Hello, ${this.name}`);
};
// 创建 1000 个实例
const people2 = [];
for (let i = 0; i < 1000; i++) {
people2.push(new BetterPerson(`Person${i}`));
}
// 内存中只有 1 个 sayHello 函数
// 原型链查找 vs 闭包
class WithPrototype {
calculate() {
return this.x + this.y;
}
}
class WithClosure {
constructor(x, y) {
this.calculate = () => x + y;
}
}
// 性能测试：原型方法通常更快，因为共享代码
A：
function myNew(Constructor, ...args) {
// 1. 创建空对象，链接原型
const obj = Object.create(Constructor.prototype);
// 2. 绑定 this 并执行构造函数
const result = Constructor.apply(obj, args);
// 3. 返回对象（如果构造函数返回对象则使用它）
return result instanceof Object ? result : obj;
}
A：
// 最佳实践：组合继承 + 寄生组合继承
function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = function() {
console.log(this.name);
};
function Child(name, age) {
Parent.call(this, name); // 继承实例属性
this.age = age;
}
// 继承原型方法（寄生组合式）
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
// 添加子类方法
Child.prototype.sayAge = function() {
console.log(this.age);
};
A：
// Object.create：创建新对象，指定原型
const proto = { x: 10 };
const obj1 = Object.create(proto);
// obj1.__proto__ === proto
// new：创建新对象，执行构造函数
function F() {}
const obj2 = new F();
// obj2.__proto__ === F.prototype
// Object.create(null) 创建无原型的"纯净"对象
const pureObj = Object.create(null);
console.log(pureObj.toString); // undefined
A：
extends 自动处理原型链#field// 1. 使用 Class 语法
class User {
constructor(name) {
this.name = name;
}
// 方法自动进入原型
sayHello() {
return `Hello, ${this.name}`;
}
// 静态方法
static createAdmin() {
return new User('admin');
}
}
// 2. 避免污染内置原型
// ❌ 不推荐
// Array.prototype.myMethod = function() { ... };
// ✅ 推荐
class MyArray extends Array {
myMethod() {
// 自定义方法
}
}
// 3. 使用组合优于复杂继承
const canEat = {
eat() {
console.log(`${this.name} is eating`);
}
};
const canSleep = {
sleep() {
console.log(`${this.name} is sleeping`);
}
};
class Animal {
constructor(name) {
this.name = name;
}
}
.(., canEat, canSleep);
__proto__（使用 Object.setPrototypeOf）Object.hasOwnProperty 区分自身属性和继承属性原型链不是过时的概念，而是 JavaScript 核心特性。虽然现代开发中直接操作原型链的场景减少，但理解原型链能帮你：
记住：你每天写的 array.map()、class extends、this.$router 都在使用原型链。它不是你需要"使用"的工具，而是你需要"理解"的基石。
掌握原型链，你就掌握了 JavaScript 面向对象编程的核心。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online