前端js的继承方式有哪些

前端js的继承方式有哪些

阅读 3.1k
5 个回答

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

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

如果有其他问题的话可以加我微信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);

我补充一下
利用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()

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题