前端js的继承方式有哪些

Question

前端js的继承方式有哪些

Answer 1

一、原型链继承
二、借用构造函数继承
三、组合继承（组合原型链继承和借用构造函数继承）（常用）
四、原型式继承
五、寄生式继承
六、寄生组合式继承（常用）

这六种方式的思想其实是差不多的，只不过各有利弊，所以大部分都用组合使用

如果有其他问题的话可以加我微信xialeistudio交流

---

原型链继承

function Parent(name) {
    this.name = name;
}
function Child() {
    this.name = "张三";
}
Child.prototype = new Parent('李四');

const child = new Child();

原型式继承

function Parent(name) {
    this.name = name;
}

function createObject(obj) {
    function Child(){}
    Child.prototype = obj;
    return new Child();
}
const parent = new Parent();
const child = createObject(parent);

Answer 2

我补充一下
利用class实现继承

class Animal{
  constructor (name) {
    this.name = name
  }

  run() {
    console.log(`${this.name}可以跑`)
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name)
  }

  run(){
    console.log(`${this.name}可以四肢腿跑`)
  }
}

class Duck extends Animal {
  constructor(name) {
    super(name)
  }

  run(){
    console.log(`${this.name}可以两只腿跑`)
  }
}

let cat = new Cat('Tom')
let duck = new Duck('Donald')

cat.run() // Tom可以四肢腿跑
duck.run()// Donald可以两只腿跑

原型实现的继承(可能是楼上说的原型式继承吧）

let animal = {
  run(){
    console.log('我可以跑')
  }
}

let cat = Object.create(animal,{
  say(){
    console.log('我是cat')
  }
})

let duck = Object.create(animal,{
  say(){
    console.log('我是duck')
  }
})

let someCat = Object.create(cat)
let someDuck = Object.create(duck)

someCat.say()
someDuck.say()

Answer 3

就用ES6的class实现继承就好了，相对来说是最完美的；
其他ES5时代的继承方式相对class，有很多缺点；

Answer 4

不要在研究 ES5 时代的模拟实现了，没有任何意义。直接学习 ES6 的 class 就好了。

Answer 5

你可能需要学习的不是继承的实现方式，而是原型链的扩展方法