深入解析JavaScript继承方式：原理与实践-CSDN博客

🎃前言

虽然平时在写代码的时候比较少用的继承，因为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);