JavaScript中继承的实现

Posted 2021-01-10 chaosjs

继承是类和类之间的关系，继承使得子类别具有父类别的属性和方法。

js里常用的如下两种继承方式：

原型链继承（对象间的继承）
类式继承（构造函数间的继承）

由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。所以，要想实现继承，可以用js的原型prototype机制或者用apply和call方法去实现。

JS继承的实现方式

1.原型链继承

function Human(name){
     this.name = name
 }
 Human.prototype.run = function(){
     console.log("我叫"+this.name+"，我在跑")
     return undefined
 }
 function Man(name){
     Human.call(this, name)
     this.gender = ‘男‘
 }

 var f = function(){}
 f.prototype = Human.prototype
 Man.prototype = new f()

 Man.prototype.fight = function(){
     console.log(‘糊你熊脸‘)
 }

2. 基于class的继承， 用 funcion 实现

class Human{
     constructor(name){
         this.name = name
     }
     run(){
         console.log("我叫"+this.name+"，我在跑")
         return undefined
     }
 }
 class Man extends Human{
     constructor(name){
         super(name)
         this.gender = ‘男‘
     }
     fight(){
         console.log(‘糊你熊脸‘)
     }
 }

---

上面两种方法的优缺点：

原型链继承

优点：

• 非常简便的实现了多重继承的关系；
• 能够确定原型和实例之间的关系；
  缺点：
• 创建子类型实例时，无法向父类型传递参数，尤其是多重继承时，弊端非常明显；
• 所有的实例会共享通过原型链继承的属性，在一个实例中改变了，会在另一个实例中反映出来；
• 不能使用字面量添加新方法，会使继承关系中断（会重写constructor属性）；

借用构造函数实现继承

优点：

• 可以通过使用call可以在调用的时候向父类型传递参数。
  缺点：
• 仅仅借用构造函数，方法都在构造函数中定义，就无法实现函数复用；
• 通过借用构造函数，在父类型原型中定义的方法也无法通过原型链暴露给子类型；