JavaScript原型继承机制深度解析

JavaScript原型继承机制深度解析

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

什么是原型继承

在面向对象编程中，继承是一个核心概念。JavaScript采用了一种独特的继承方式——原型继承（Prototypal Inheritance），这与传统的基于类的继承有着本质区别。

原型继承允许对象直接从其他对象继承属性和方法，而不需要明确定义类。这种机制使得JavaScript非常灵活，能够轻松实现对象的扩展和复用。

[[Prototype]]：JavaScript继承的核心

每个JavaScript对象都有一个隐藏的[[Prototype]]属性，它要么指向另一个对象，要么为null。这个被引用的对象就是我们所说的"原型"。

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal; // 设置rabbit的原型为animal

当我们访问rabbit.eats时，JavaScript会先在rabbit对象自身查找，如果找不到就会沿着原型链向上查找，直到找到该属性或到达原型链末端。

原型链的工作原理

原型链是JavaScript实现继承的基础机制。让我们看一个更复杂的例子：

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

longEar.walk(); // 输出: "Animal walk"
console.log(longEar.jumps); // 输出: true

在这个例子中，longEar的原型是rabbit，而rabbit的原型又是animal，这样就形成了一条原型链。当访问属性时，JavaScript会沿着这条链向上查找。

原型继承的重要特性

1. 方法共享，状态独立

原型中定义的方法会被所有继承对象共享，但每个对象的状态（属性值）是独立的：

let animal = {
  sleep() {
    this.isSleeping = true;
  }
};

let rabbit = {
  __proto__: animal
};

rabbit.sleep();
console.log(rabbit.isSleeping); // true
console.log(animal.isSleeping); // undefined

这里的关键点是：方法中的this始终指向调用该方法的对象，而不是定义方法的原型对象。

2. 属性访问与赋值的区别

读取属性时会沿着原型链查找，但写入属性时只会影响当前对象：

let animal = {
  eats: true
};

let rabbit = {
  __proto__: animal
};

rabbit.eats = false; // 在rabbit上创建新属性，不会修改animal

console.log(rabbit.eats); // false
console.log(animal.eats); // true

3. 访问器属性的特殊行为

对于getter/setter属性，赋值操作会调用setter方法，且this仍然指向当前对象：

let user = {
  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

let admin = {
  __proto__: user
};

admin.fullName = "Alice Cooper"; // 调用user的setter，但this指向admin

遍历对象属性

for..in循环会遍历对象自身及原型链上的所有可枚举属性：

let animal = { eats: true };
let rabbit = { jumps: true, __proto__: animal };

for(let prop in rabbit) {
  console.log(prop); // 输出 jumps 和 eats
}

如果只想获取对象自身的属性，可以使用hasOwnProperty方法：

for(let prop in rabbit) {
  if(rabbit.hasOwnProperty(prop)) {
    console.log("Own: " + prop); // 只输出 jumps
  }
}

现代原型操作方法

虽然__proto__被广泛支持，但现代JavaScript推荐使用以下方法：

• Object.getPrototypeOf(obj) - 获取对象的原型
• Object.setPrototypeOf(obj, proto) - 设置对象的原型
• Object.create(proto) - 创建一个以指定对象为原型的新对象

let animal = { eats: true };
let rabbit = Object.create(animal);
rabbit.jumps = true;

原型继承的实际应用

理解原型继承对于掌握JavaScript至关重要。它是实现以下功能的基础：

1. 内置对象的方法继承：所有对象都继承自Object.prototype，所以可以使用toString()等方法。
2. 构造函数和类的底层实现：ES6的class语法实际上是原型继承的语法糖。
3. 对象组合和混入模式：通过原型可以灵活地组合对象功能。

总结

JavaScript的原型继承机制是其面向对象编程的核心。关键点包括：

• 每个对象都有[[Prototype]]属性形成原型链
• 属性读取会沿着原型链查找，写入则作用于当前对象
• 方法调用中的this始终指向调用对象
• for..in会遍历原型链属性，而大多数其他方法只处理自身属性
• 现代代码应使用Object.getPrototypeOf等方法而非__proto__

掌握这些概念对于编写高效、可维护的JavaScript代码至关重要。原型继承的灵活性是JavaScript强大表现力的重要来源。

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info