【个人笔记】JavaScript继承方式

参考文章

本文会在参考文章的基础上拓展内容和补充原型链图解

原型链继承

js 复制代码
function Animal() {  
    this.colors = ['black', 'white']  
}  
Animal.prototype.getColor = function() {  
    return this.colors  
}  
function Dog() {}  
Dog.prototype =  new Animal()  
  
let dog1 = new Dog()  
dog1.colors.push('brown')  
let dog2 = new Dog()  
console.log(dog2.colors)  // ['black', 'white', 'brown']

原型链继承存在的问题:

  • 问题1:原型中包含的引用类型属性将被所有实例共享;
  • 问题2:子类在实例化的时候不能给父类构造函数传参;

原型链继承将派生类的原型对象修改为超类实例,通过原型链可以访问到超类实例和超类原型对象,从而实现继承。

问题一中为什么特别指明"引用类型属性"呢?因为当我们尝试对基本类型属性进行赋值的时候,会自动在实例上创建一个新属性。而引用类型属性如果不是直接赋值,就会修改原型链上的属性,从而影响所有实例。

js 复制代码
dog.age = 5 // 在 dog 实例上新增 age 属性
dog.colors.push = 'brown' // 修改了原型链上共享的 colors 数组
dog.colors = ['brown'] // 给 dog 实例添加了一个新的 colors 属性

借用构造函数实现继承

js 复制代码
function Animal(name) {  
    this.name = name  
    this.getName = function() {  
        return this.name  
    }  
}  
function Dog(name) {  
    Animal.call(this, name)  
}
// 原文还修改了prototype,应该是属于组合继承,这里先不讨论
// Dog.prototype =  new Animal()

借用构造函数实现继承解决了原型链继承的 2 个问题:引用类型共享问题以及传参问题。但是由于方法必须定义在构造函数中,所以会导致每次创建派生类实例都会创建一遍方法。


Animal.call(this, name) 会把 Animal 构造函数的所有实例属性(无论是基本类型还是引用类型),拷贝到当前 Dog 实例上。实现了对超类的实例属性的继承,但无法访问到超类的原型对象上的方法。

组合继承

组合继承结合了原型链和盗用构造函数,将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法,而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用,又可以让每个实例都有自己的属性。

js 复制代码
function Animal(name) {  
    this.name = name  
    this.colors = ['black', 'white']  
}  
Animal.prototype.getName = function() {  
    return this.name  
}  
function Dog(name, age) {  
    Animal.call(this, name)  // 第二次调用Animal()
    this.age = age  
}  
Dog.prototype =  new Animal()  // 第一次调用Animal()
Dog.prototype.constructor = Dog  
  
let dog1 = new Dog('奶昔', 2)  
dog1.colors.push('brown')  
let dog2 = new Dog('哈赤', 1)  
console.log(dog2)   
// { name: "哈赤", colors: ["black", "white"], age: 1 }

通过Animal.call(this, name)继承超类的实例属性,通过Dog.prototype = new Animal()访问到超类的原型属性和方法。

组合继承的缺点在于两次调用超类的构造函数,Dog.prototype = new Animal()是第一次调用,派生类的原型对象会创建两个属性 name 和 colors。Animal.call(this, name)是第二次调用,在派生类的实例上创建了实例属性name 和 colors,这两个属性屏蔽了原型中的两个同名属性。

简单来说,Dog.prototype = new Animal() 创建了一个多余的超类实例(即上图中间的Animal实例),派生类访问不到这个实例的属性,但又需要它以继承原型上的方法。

寄生式组合继承

js 复制代码
// 方法一、封装
function inheritPrototype(subType, superType){
    var protoType = Object.create(superType.prototype);    
    protoType.constructor = subType;                   
    subType.prototype = protoType;                        
}
inheritPrototype(Dog, Animal)

// 方法二、懒得封装
function Dog(name, age) {  
    Animal.call(this, name)  
}  
Dog.prototype =  Object.create(Animal.prototype) // 在组合继承基础上修改这一行
Dog.prototype.constructor = Dog  

Object.create(superType.prototype)创建一个新对象,使其__proto__指向superType.prototype,避免多次调用超类构造函数。

class实现继承

js 复制代码
class Animal {  
    constructor(name) {  
        this.name = name  
    }   
    getName() {  
        return this.name  
    }  
}  
class Dog extends Animal {  
    constructor(name, age) {  
        super(name)  
        this.age = age  
    }  
}
相关推荐
码农捻旧34 分钟前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina35 分钟前
前端面试之防抖节流(一)
前端·javascript·面试
浏览器API调用工程师_Taylor1 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤1 小时前
Vue 高级视频播放器实现指南
前端
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主1 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴1 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子2 小时前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder2 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛2 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts