Javascript中的几种继承？如何实现继承？

末蓝、 2024-03-25 06:08 60阅读 0赞

在 JavaScript 内, 继承是面向对象变成中一个重要的开发思想, 核心就是让 A 对象使用 B 对象的属性和方法. 说白了, 就是为了资源整合, 让我们的代码复用性更高, 后期的可维护性和可扩展性也更高.

在 JS 中, 每一个对象都有一个自己的原型对象, JS 内的继承就是依赖这个原型对象, 而且原型对象也有自己的原型对象, 就是这一个一个的原型对象组成了原型链, 这就是继承的核心.

**举个例子 :**

有一位老父亲, 努力了半辈子, 盖了一个大房子

![c369cd2c5fe4a7fa5cfe8b0ff50e4536.png][]

这个时候, 不管这个老父亲有多少个儿子, 他的儿子都是可以住在这个房子里面的

可以用这个房子所有内容

![1beedb55a35157ef9b9a69ccfc9df49f.png][]

但是如果要是没有继承的话, 那么他的每一个儿子都要自己去从新盖房子

这就是我们继承的意义, 接下来我们就详细的说一说 JavaScript 内常见的继承方案

**回顾之前的知识点**

### **原型** ###

构造函数(类) 有一个自己的属性 prototype, 是一个对象，每一个对象都有一个自己的属性 \_\_proto\_\_, 指向所属构造函数的 prototype，这样, 就将构造函数和对象连接了起来。

![81c13fb99b0db851a1432a03d86bccce.png][]

### **原型链** ###

原型链就是 \_\_proto\_\_ 串联起来的对象链状结构，每一个对象都会有自己的原型对象( \_\_proto\_\_ )。

![8caaae9888693602d97a78013e561d07.png][]

### **原型链访问规则** ###

对象成员的访问规则就是按照原型链的机制进行访问的，当你访问一个对象的成员的时候，会首先在对象自己内查找。

如果自己有, 直接使用自己的如果自己没有, 就会自动去到自己的 \_\_proto\_\_ 查找，如果还没有, 在继续去 \_\_proto\_\_ 查找，以此类推，直到 Object.prototype 都没有, 那么返回 null。

**回常见继承方案**

**1. 原型链继承**

● 本质就是在原型链上做一些手脚, 让某一个对象的 \_\_proto\_\_ 能指向另一个对象就好了

● 核心 : 子类的原型指向父类的实例

// 父类
    function Person(name) {
      this.name = name
    }
    Person.prototype.sayHi = function () { 
      console.log('hello world') 
    }
    
    // 子类
    function Student(age) {
      this.age = age
    }
    
    // 实现继承
    Student.prototype = new Person('千锋大前端')
    
    const s = new Student(10)
    console.log(s)

缺点 :子类没有自己的原型, 因为子类的原型就是父类的实例，在继承属性这方面, 所有子类实例对象继承下来的属性都是一模一样的。

优点 :属性和方法都能继承下来。

**2. 借用构造函数继承**

本质就是把父类构造函数当做一个普通函数来使用, 在利用一些改变 this 指向的方法

核心 : 利用 call 或者 apply 方法调用父类构造函数, 让其 this 指向子类的实例

// 父类
    function Person(name) {
      this.name = name
    }
    Person.prototype.sayHi = function () { 
      console.log('hello world') 
    }
    
    // 子类
    function Student(age, name) {
      this.age = age
    
      // 实现继承
      Person.call(this, name)
    }
    
    const s = new Student(10, '千锋大前端')
    console.log(s)

**缺点** :只能继承父类的属性, 原型上的方法不能继承。

**优点** :子类有自己的原型, 可以向自己的原型上添加专属于子类的内容，对于继承的属性而言, 每一个子类的实例都会继承一套自己的属性。

**3. 基础组合继承**

本质就是把上面的 原型继承 和 借用构造函数继承 组合在一起使用而已，将以上两种继承方式的优点全部合并在一起, 号称最早的完美继承。

// 父类
    function Person(name) {
      this.name = name
    }
    Person.prototype.sayHi = function () { 
      console.log('hello world') 
    }
    
    // 子类
    function Student(age) {
      this.age = age
      
      // 实现继承( 目的 : 继承属性 )
      Person.call(this, name)
    
    }
    
    // 实现继承( 目的 : 继承方法, 属性不重要 )
    Student.prototype = new Person()
    
    const s = new Student(10, '千锋大前端')
    console.log(s)

**4. 寄生继承**

本质就是是利用一个空对象来包装父类的实例对象，然后再将该空对象的原型设置为父类的原型对象，最后将该空对象返回作为子类的实例对象，从而实现继承。

function Parent(name) {
      this.name = name;
    }
    
    Parent.prototype.sayHi = function() {
      console.log('hello world')
    }
    
    function Student(parent, name) {
      let student = Object.create(parent)
      student.name = name
      student.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`)
      }
      return student
    }
    
    let parent = new Parent('千锋大前端')
    let student = createChild(parent, '千锋大前端')
    
    student.sayHello()
    student.sayHi()

**5. 寄生组合继承**

这是一个非常经典的继承方案, 他是结合了 寄生继承 和 基础组合继承 两者创造出来的. 并且解决了组合继承中重复调用构造函数的尴尬, 同时也很好的避免了寄生继承中的原型链污染, 是我个人觉得非常优秀得以中继承方案, 不知道是哪一个大神想出来的方案.

在寄生组合继承中，我们首先使用组合继承的方式创建对象和原型之间的关系，然后通过寄生继承的方式修正原型上不需要的属性

![28cbdd180b2c90ca02f8c79e09a24d53.png][]

// 寄生继承实现函数
    function inheritPrototype(student, person) {
      // 创建父类原型的一个副本
      let prototype = Object.create(person.prototype)
      // 修正副本的 constructor 属性
      prototype.constructor = student
      // 将修正后的原型赋值给子类
      student.prototype = prototype
    }
    
    // 父类
    function Person(name) {
      this.name = name
    }
    Person.prototype.sayHi = function() {
      console.log('hello world')
    }
    
    // 子类
    function Student(age, name) {
      this.age = age
      // 借用继承( 目的 : 继承属性 )
      Person.call(this, name)
    }
    
    // 寄生继承
    inheritPrototype(Student, Person)
    
    // 向子类自己的原型上添加方法
    Student.prototype.sayHello = function() {
      console.log(`Hello, My name is ${ this.name }`);
    }
    
    let instance = new Student(10, '千锋大前端')
    instance.sayHello()
    instance.sayHi()

**6. ES6 的类继承语法**

在 ES6 规范中, 出现了类继承的语法，也就是说, 我们可以不需要以上这些乱七八糟的玩意了, 直接上语法，我们可以直接使用 extends 关键字进行父类的继承

注意 : 还需要在类的构造器内写一个 super 来继承父类属性

// 父类
    class Person {
      constructor(name) {
        this.name = name;
      }
    
      sayHi () {
        console.log('Hello world')
      }
    }
    
    // 子类, 直接使用 extends 关键字继承父类
    class Student extends Person {
      constructor(name, age) {
        // 继承父类属性
        super(name)
        this.age = age
      }
    
      sayAge() {
        console.log(`Hello, My name is ${ this.name }`)
      }
    }
    
    let instance = new Student('千锋大前端', 10)
    instance.sayHello()
    instance.sayHi()

[c369cd2c5fe4a7fa5cfe8b0ff50e4536.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/82e505ed2f684c4da6384e24bc6c1ca2.png
[1beedb55a35157ef9b9a69ccfc9df49f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d20f1310d166432ba4a5c65746307229.png
[81c13fb99b0db851a1432a03d86bccce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3346d1e056eb455ba21de7d5409c5131.png
[8caaae9888693602d97a78013e561d07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1555ee50198e4cd6b5c700ccc67d7ba1.png
[28cbdd180b2c90ca02f8c79e09a24d53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/893f00a5b9d94e788fae01fc46e881bb.png