JavaScript的原型链继承机制

最新推荐文章于 2024-07-22 03:33:32 发布

转载最新推荐文章于 2024-07-22 03:33:32 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c00a923f265da611a4795fa

文章标签：

#javascript #ViewUI

本文深入探讨JavaScript中使用prototype属性实现继承的机制。通过对比构造函数直接赋值和使用prototype对象，阐述了如何通过prototype对象实现属性和方法的共享，减少资源浪费，提高代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

prototype实现继承的来源

JavaScript通过new命令来给构造函数创建实例对象后，实例对象无法共享属性和方法，例如

function Person (name) {
    this.name = name
    this.work = 'write code'
}
// 然后，生成两个实例对象：
var p1 = new Person('suoling')
var p2 = new Person('yaoyuan')
// 这两个对象的work属性是独立的，修改其中一个，不会影响到另一个。
p1.work = 'sleep'
console.log(p2.work)  // 'write code'
复制代码

综上，每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费

prototype出现

由于new命令创建实例对象存在缺点，所以给构造函数设置一个prototype属性，这个属性包含一个对象（以下简称"prototype对象"），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。
实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。如下

function Person (name) {
    this.name = name
}
Person.prototype = { work: 'write code' }
// 然后，生成两个实例对象：
var p1 = new Person('suoling')
var p2 = new Person('yaoyuan')
console.log(p1.work)  // 'write code'
console.log(p2.work)  // 'write code'
// 现在，work属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。
Person.prototype.work = 'sleep'
console.log(p1.work)  // 'sleep'
console.log(p2.work)  // 'sleep'
复制代码