JavaScript prototype用法详解

JavaScript 的原型（prototype）是实现对象继承和属性共享的核心机制，通过原型链实现方法复用和动态扩展。以下是详细解析：

1. 原型的核心概念

构造函数：用于创建对象的函数（如 Person）。
实例对象：通过 new 调用构造函数创建的对象（如 person1）。
原型对象：构造函数的 prototype 属性，包含所有实例共享的属性和方法。

function Person(name) { this.name = name; }const person = new Person('Alice');console.log(person.__proto__ === Person.prototype); // true2. 原型的基本用法添加共享方法

通过 prototype 添加的方法会被所有实例共享，避免重复定义。

Person.prototype.greet = function() { console.log(`Hello, ${this.name}`);};person.greet(); // 输出: Hello, Alice添加共享属性

动态修改原型会影响所有实例（包括已创建的实例）。

Person.prototype.species = 'Homo Sapiens';console.log(person.species); // 输出: Homo Sapiens3. 原型链机制

当访问对象的属性或方法时，JavaScript 会按以下顺序查找：

对象自身 → 2. 原型对象 → 3. 原型的原型 → ... → 直到 Object.prototype（终点为 null）。

console.log(person.__proto__ === Person.prototype); // trueconsole.log(Person.prototype.__proto__ === Object.prototype); // trueconsole.log(Object.prototype.__proto__ === null); // true4. 高级用法使用 Object.create

创建新对象并指定其原型（不依赖构造函数）：

const anotherPerson = Object.create(Person.prototype);anotherPerson.name = 'Bob';anotherPerson.greet(); // 输出: Hello, Bob检查属性来源

hasOwnProperty()：区分对象自身属性与继承属性。

console.log(person.hasOwnProperty('name')); // trueconsole.log(person.hasOwnProperty('greet')); // false5. 注意事项

性能问题：深层原型链可能导致属性查找变慢。
可维护性：过度使用原型链会使代码逻辑复杂化。
避免修改内置原型：如 Array.prototype.push = ... 会破坏原生方法。

6. 原型与继承

通过原型实现继承（ES5 方式）：

function Student(name, grade) { Person.call(this, name); // 继承属性 this.grade = grade;}Student.prototype = Object.create(Person.prototype); // 继承方法Student.prototype.constructor = Student; // 修复构造函数指向const student = new Student('Charlie', 'A');student.greet(); // 输出: Hello, Charlie总结

共享方法：通过 prototype 添加，节省内存。
动态扩展：可随时修改原型，影响所有实例。
原型链查找：实现属性继承和多级共享。
最佳实践：合理使用原型，避免滥用导致代码混乱。

掌握原型机制是深入理解 JavaScript 面向对象编程的关键！

您可能感兴趣问答

Collapsible

热门标签

热点问答