再次复习JavaScript 原型链

在 JavaScript 的世界里，原型链是一个核心概念，它支撑着 JavaScript 面向对象编程的实现。理解原型链，对于编写高效、可维护的 JavaScript 代码至关重要。本文将深入探讨 JavaScript 原型链，从基础概念到实际应用，并通过丰富的示例帮助读者掌握这一关键知识点。

一、原型的基本概念

在 JavaScript 中，每个对象都有一个特殊的内置属性 [[Prototype]]，它指向另一个对象，这个被指向的对象就是原型对象。原型对象就像是一个模板，它包含了一些属性和方法，这些属性和方法可以被其他对象继承。

例如，我们创建一个简单的对象

js 复制代码

const person = { name: 'xiaoming', age: 30 };

这里的 person 对象有自己的 name 和 age 属性。实际上，person 对象还有一个 [[Prototype]] 属性，它指向 Object.prototype，这是所有对象的默认原型。

二、原型链的形成

当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会自动沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。这就形成了原型链。

我们来看一个更具体的例子：

js 复制代码

// 创建一个构造函数
function Animal(name) {
    this.name = name;
}

// 给构造函数的原型添加一个方法
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound.`);
};

// 创建一个基于Animal的构造函数
function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

// 设置Dog的原型为Animal的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 创建一个Dog的实例
const myDog = new Dog('Buddy', 'Golden Retriever');

// 访问myDog的属性和方法
console.log(myDog.name); // 输出: Buddy
console.log(myDog.breed); // 输出: Golden Retriever
myDog.speak(); // 输出: Buddy makes a sound.

在这个例子中，myDog 是 Dog 的实例，Dog 的原型是 Animal 的实例，Animal 的原型是 Object.prototype，最终形成了一条原型链：myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null。

三、原型链的实际应用

代码复用 ：通过原型链，我们可以在多个对象之间共享属性和方法，避免重复代码。例如，在上面的 Animal 和 Dog 的例子中，所有的 Dog 实例都可以使用 Animal.prototype 上定义的 speak 方法，而不需要在每个 Dog 实例中重复定义。
继承：原型链是 JavaScript 实现继承的基础。通过设置一个对象的原型为另一个对象的实例，我们可以实现类似类继承的效果。在上面的例子中，Dog 继承了 Animal 的属性和方法。

四、注意事项

性能问题：由于原型链的查找机制，当原型链很长时，查找属性或方法的性能会受到影响。因此，在设计对象和原型链时，要尽量保持原型链的简洁。
属性遮蔽：如果一个对象本身有一个属性，并且这个属性与原型链上的某个属性同名，那么对象本身的属性会遮蔽原型链上的属性。在访问该属性时，会返回对象本身的属性值，而不是原型链上的属性值。

js 复制代码

const person = {
    name: 'John',
    age: 30
};

Object.prototype.name = 'Default Name';

console.log(person.name); // 输出: John，对象本身的属性遮蔽了原型链上的属性