JavaScript 的原型链是什么？-js教程-PHP中文网

JavaScript 的原型链是什么？

Linda Hamilton

发布： 2024-11-19 07:04:03

原创

707 人浏览过

为什么原型链很重要

JavaScript 原型链 是 JavaScript 中对象和继承结构的基础。虽然现代 ES6 类呈现出精美的视图，但它们最终只是基于原型的系统的语法糖。本指南深入探讨原型链的机制、用例、潜在陷阱和优化，为您提供掌握 JavaScript 的关键知识。

原型链的基本概念

每个 JavaScript 对象都有一个内部属性 [[Prototype]]，它链接到另一个对象或 null。此链接形成一条链，其中属性查找遵循该链，直到找到所请求的属性或达到 null。

基本结构示例：

const animal = {
    sound: 'Generic sound',
    makeSound() {
        console.log(this.sound);
    }
};

const dog = Object.create(animal);
dog.sound = 'Bark';

dog.makeSound(); // Output: Bark

登录后复制

这里，dog有自己的属性sound，但是它的[[Prototype]]指向animal，允许共享方法被继承。

JavaScript 的原型链是如何演变的

JavaScript 的初始设计旨在通过其基于原型的模型支持动态行为，这与 Java 和 C 等语言中基于类的继承不同。随着时间的推移，重大变化，尤其是 ECMAScript 5 和 6，简化了开发人员与原型交互的方式。

ES6 语法简化：

class Vehicle {
    constructor(type) {
        this.type = type;
    }
    drive() {
        console.log(`${this.type} is moving`);
    }
}

class Car extends Vehicle {
    honk() {
        console.log('Beep!');
    }
}

const myCar = new Car('Sedan');
myCar.drive(); // Output: Sedan is moving
myCar.honk();  // Output: Beep!

登录后复制

这个类结构建立在相同的原型机制上，Car.prototype.__proto__ 链接到Vehicle.prototype。

详细类说明的外部链接：MDN：类

深入探讨：属性查找和方法解析

访问属性或方法时，JavaScript 首先搜索当前对象。如果该属性不存在，它将递归地检查 [[Prototype]] 链。

高级查找插图：

const base = { shared: true };
const derived = Object.create(base);

console.log(derived.shared); // true, found in `base`
derived.shared = false;
console.log(derived.shared); // false, shadowed by derived's property

登录后复制

构建和修改原型

开发人员可以创建强大的继承结构或通过原型扩展现有对象。

添加原型方法：

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
};

const john = new Person('John');
john.greet(); // Output: Hello, I'm John

登录后复制

原型链实际应用：

console.log(john.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

登录后复制

现代代码洞察：这条链确保甚至像 toString() 这样的基本属性也可以通过 Object.prototype 访问。

现代 JavaScript 引擎中的优化技术

像 Google V8 这样的高级 JavaScript 引擎使用隐藏类和内联缓存来优化沿原型链的属性查找，即使在多个链级别上也能提高属性访问效率。

实践优化示例：结构良好的原型链可最大限度地减少属性查找时间，有助于性能敏感的应用程序。

最佳实践和要避免的陷阱

原型污染：修改Object.prototype要小心，因为它会影响所有对象。
阴影问题：本地覆盖属性可能会导致继承属性出现意外行为。
性能影响：深层原型链会减慢查找速度，尤其是在涉及嵌套继承结构时。

实际应用和真实用例

像 React 这样的框架和像 Lodash 这样的库利用原型来实现内存高效的方法共享，这表明对原型行为的深入理解对于高级 JavaScript 开发至关重要。

代码示例：

const animal = {
    sound: 'Generic sound',
    makeSound() {
        console.log(this.sound);
    }
};

const dog = Object.create(animal);
dog.sound = 'Bark';

dog.makeSound(); // Output: Bark

登录后复制

其他资源：在 JavaScript.info 上了解有关基于原型的继承的更多信息。