JavaScript原型机制：继承与共享的精髓
JavaScript中的原型机制，是其对象创建和继承的基础。每个对象都关联一个原型对象，用于继承属性和方法，实现代码复用和高效的继承方式。
1. 原型是什么？
每个JavaScript对象都拥有一个内部属性[[Prototype]]，指向其原型对象。该原型对象包含该对象实例共享的属性和方法。我们可以通过__proto__属性（多数浏览器支持）或Object.getPrototypeOf()方法访问对象的原型。
例如，新建对象时，会继承其构造函数的原型对象上的属性和方法：
立即学习“Java免费学习笔记（深入）”；
function Person(name, age) { this.name = name; this.age = age;}// 向Person原型添加方法Person.prototype.greet = function() { console.log("Hello, " + this.name);};const person1 = new Person("John", 30);person1.greet(); // 输出: "Hello, John"
登录后复制
2. 原型链
JavaScript对象通过原型链彼此关联。访问对象的属性或方法时，JavaScript会先查找对象自身，若不存在，则沿着原型链向上查找，直到Object.prototype（根原型对象）。若仍未找到，则返回undefined。
function Animal(name) { this.name = name;}Animal.prototype.speak = function() { console.log(this.name + " makes a sound.");};function Dog(name) { Animal.call(this, name); // 继承Animal的属性}Dog.prototype = Object.create(Animal.prototype); // 设置原型链Dog.prototype.constructor = Dog; // 修正构造函数引用const dog1 = new Dog("Buddy");dog1.speak(); // 输出: "Buddy makes a sound."
登录后复制
3. 向原型添加方法
将方法添加到构造函数的原型中，所有实例都能访问该方法。这是定义共享方法的更高效方式。
function Car(make, model) { this.make = make; this.model = model;}// 向原型添加方法Car.prototype.displayInfo = function() { console.log(this.make + " " + this.model);};const car1 = new Car("Toyota", "Corolla");car1.displayInfo(); // 输出: "Toyota Corolla"
登录后复制
4. 构造函数与原型的关系
原型对象与构造函数密切相关。使用new关键字创建对象实例时，实例的[[Prototype]]会被设置为构造函数的原型。
function Student(name, grade) { this.name = name; this.grade = grade;}Student.prototype.study = function() { console.log(this.name + " is studying.");};const student1 = new Student("Alice", "A");console.log(student1.__proto__ === Student.prototype); // true
登录后复制
5. 原型继承
原型继承允许对象继承另一个对象的属性和方法。通过将一个对象的原型设置为另一个对象的原型实现。
function Animal() { this.legs = 4;}Animal.prototype.walk = function() { console.log("Walking...");};function Dog(name) { this.name = name;}Dog.prototype = Object.create(Animal.prototype); // 继承AnimalDog.prototype.constructor = Dog; // 修正构造函数引用const dog2 = new Dog("Rex");console.log(dog2.legs); // 输出: 4dog2.walk(); // 输出: "Walking..."
登录后复制
6. Object.getPrototypeOf() 和 Object.setPrototypeOf()
Object.getPrototypeOf() 和 Object.setPrototypeOf() 方法用于获取和修改对象的原型。 但修改原型在运行时可能会影响性能，建议谨慎使用。
const obj = {};const proto = { greet() { console.log("Hello!"); } };Object.setPrototypeOf(obj, proto);obj.greet(); // 输出: "Hello!"
登录后复制
7. 原型与性能
原型机制能高效共享方法和属性，但运行时修改原型可能导致性能问题。最佳实践是在创建后避免修改原型。
8. 关键点总结
每个对象都有一个原型，形成原型链。原型用于继承属性和方法。在构造函数原型中定义共享方法更高效。JavaScript继承是通过原型链实现的。Object.getPrototypeOf() 和 Object.setPrototypeOf() 用于操作原型。
结论
JavaScript原型机制是其面向对象编程的关键，理解其工作原理能编写更高效、更优雅的代码。
作者：Abhay Singh Kathayat
全栈开发工程师，精通前端和后端技术，致力于构建高效、可扩展、用户友好的应用程序。 联系邮箱：kaashshorts28@gmail.com
以上就是了解 JavaScript 原型：继承和方法共享综合指南的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2645406.html
