【个人笔记】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  
    }  
}
相关推荐
风舞几秒前
HTML核心概念及代码示例的梳理
前端
1君1103561 分钟前
粗解前端Proxy和defineProperty以及他们的区别
前端
Shinpei1 分钟前
如何优雅的在AI应用中渲染Markdown数据
前端·deepseek
Codebee1 分钟前
OneCode List 组件技术解析:设计理念、子类体系与扩展实践
前端
张旭超1 分钟前
vue3 + element-plus el-table表格二次封装,支持复选框,排序,分页。
前端·vue.js
Nicholas6812 分钟前
Flutter动画框架之AnimationStatus、Animation源码解析(一)
前端
亿坊电商19 分钟前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
新人11yj427 分钟前
如何给网页增加滚动到顶部的功能
前端·javascript
掘金一周28 分钟前
Figma Dev Mode MCP:大人,时代变了 | 掘金一周7.10
前端·人工智能·mcp
Data_Adventure32 分钟前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas