继承的简单了解

13 篇文章 0 订阅
5 篇文章 0 订阅

🎃前言

虽然平时在写代码的时候比较少用的继承,因为JS首先应该是类似于动态的,不像其他语言一样,它没有提供一个Class的实现,只是在ES2015/ES6中通过引入Class关键字语法糖而已,由于是基于原型的继承,所以继承是面试会重点考察的一部分,继承在很大程度上是比较考验到对面向对象的一个熟悉程度,关于JS的继承中有几大种方式,那么今天通过这篇文章就把自己了解到的继承方式展开一下学习。

🎆什么是继承

继承可以是一个简单的父子关系,比如‘B继承了A,那么B就相当于是A的子类,A就是B的父类’,简单的一句话就能说明继承是什么。既然B是A的‘儿子’,那么将生物学方面作为比较,儿子可能长的比较像父亲,在某些行为习惯上也会和父亲比较相同,这种情况那就是继承。

🎇继承的优点

继承可以让子类得到父类的一些优点,转换到代码角度来说

继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码

儿子和父亲其实是俩个独立的个体,那么儿子在继承父亲的情况下,并不是一个‘克隆人’,儿子本身也可以有一些‘与父不同’的优点

在子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能

🎋如何实现继承

先引入一下MDN对继承的简单介绍

当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象(object)都有一个私有属性(称之为 proto )指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(proto),层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。

所以我们可以利用原型的方式来实现JS的继承,我们先来看一个简单的例子让我们更好的了解继承

定义一个类(Class)叫父亲,父亲的属性包括体型,身高,头发颜色等

class Father{
    constructor(body,hair){
        this.body = body
        this.hair = hair
        // ...
    }
}

父亲可以繁衍后代,可以有自己的儿子,那么他的儿子在它的基础上,可以继承他的体型和头发颜色,儿子也有自己的优点,可能比父亲更聪明,比如父亲有俩个儿子,一个更加聪明,一个更加有艺术感,但是他们的体型和头发颜色和父亲是一样的

class Child1 extends Father{
    constructor(body,hair){
        super(body,hair)
        this.smart = true // 更聪明
    }
}
class Child2 extends Father{
    constructor(body,hair){
        super(body,hair)
        this.hobby = '唱跳rap' // 更菜徐坤
        this.hair = 'red' 
    }
}

到这里我们就介绍一个简单的继承的例子

class Father{
    constructor(body,hair){
        this.body = 'big'
        this.hair = 'black'
        // ...
    }
}
class Child1 extends Father{
    constructor(smart){
        super()
        this.smart =  smart// 更聪明
    }
}
class Child2 extends Father{
    constructor(body,hobby){
        super()
        this.hobby = hobby // 更菜徐坤
        this.body = body //修改父亲的值
    }
}
let xiaoming = new Child1(true)
console.log(xiaoming);
let xiaoli = new Child2('small','唱跳rap')
console.log(xiaoli);

image.png

🎐继承方式

下一节我们来介绍: JavaScripy常见的继承方式:

  • 原型链继承
  • 构造函数继承
  • 组合继承
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值