如何在 reactjs 函数对象中进行继承？答案

【问题标题】：How can I do Inheritance in reactjs function object?如何在 reactjs 函数对象中进行继承？
【发布时间】：2020-12-27 20:25:50
【问题描述】：

如何在 Reactjs 中进行继承，我正在开发基于画布的应用程序。我需要为此创建对象并扩展和添加一些东西和事件，例如，我尝试制作基本代码。这是我尝试过但不起作用的方法，我想知道我应该怎么做才能实现这一目标

export default function car() {
  let speed = 40;
  let name = 'basic car'
  let engine = {
    type: petrol
  }

  this.run = () => {
    console.log(name + ' can run with max ' + speed + 'kmph');
  }

  this.getinfo = () => {
    console.log('this is ' + name + ' which can run using ' + engine.type)
  }

  this.eve = () => {
    //Trigger engine object redux events
  }

  this.getengine = () => {
    return engine
  }

}

export default mustang extends car() {
  this.speed = 200
  this.name = 'ford mustang'
  this.engine = {
    type 'disel'
  }
}


let mycar = new mustang()
mycar.run() // Required output = ford mustang can run with max 200kmph
mycar.getinfo() //Required output = this is ford mustang which can run using disel
mycar.eve() // Require output fordcar engine triggler event
mycar.getengine() // Rquire output ford car disel type engine object

【问题讨论】：

你拼错了extends。
错误地，实际上我编写此代码只是为了在此处发布，我最初的问题是基于画布的，并且我发布了简单的逻辑问题。
如果您可以包含与画布相关的代码，则可能更容易理解您要实现的继承。对于您的简单逻辑示例，建议使用类而不是函数。

标签： javascript reactjs inheritance jsx

【解决方案1】：

您混淆了一些语法。 extends 关键字只能在使用class 语法时使用。它基本上和函数构造函数做同样的事情，但它是在 ES6 中添加的语法糖层，可以更轻松地创建对象构造函数。

class Car {
  constructor() {
    this.speed = 40;
    this.name = 'basic car'
    this.engine = {
      type: 'petrol'
    }
  }

  run() {
    console.log(this.name + ' can run with max ' + this.speed + 'kmph');
  }

  getinfo() {
    console.log('this is ' + this.name + ' which can run using ' + this.engine.type)
  }

  eve() {
    //Trigger engine object redux events
  }

  getEngine() {
    return this.engine;
  }
}

class Mustang extends Car {
  constructor() {
    super();
    this.speed = 200
    this.name = 'ford mustang'
    this.engine = {
      type: 'diesel'
    }
  }
}


let mycar = new Mustang()
mycar.run() // Required output = ford mustang can run with max 200kmph
mycar.getinfo() //Required output = this is ford mustang which can run using disel
mycar.eve() // Require output fordcar engine triggler event
mycar.getEngine() // Rquire output ford car disel type engine object

或者使用inheriting the prototype 的经典方式扩展函数。这与class 发生的情况基本相同，但需要执行更多步骤。

function Car() {
  this.speed = 40;
  this.name = 'basic car'
  this.engine = {
    type: 'petrol'
  }
}

Car.prototype.run = function() {
  console.log(this.name + ' can run with max ' + this.speed + 'kmph');
}

Car.prototype.getinfo = function() {
  console.log('this is ' + this.name + ' which can run using ' + this.engine.type)
}

Car.prototype.eve = function() {
  //Trigger engine object redux events
}

Car.prototype.getEngine = function() {
  return this.engine
}

function Mustang() {
  Car.call(this);
  this.speed = 200
  this.name = 'ford mustang'
  this.engine = {
    type: 'diesel'
  }
}

Mustang.prototype = Object.create(Car.prototype, {
  constructor: {
    value: Mustang
  }
});

let mycar = new Mustang()
mycar.run() // Required output = ford mustang can run with max 200kmph
mycar.getinfo() //Required output = this is ford mustang which can run using disel
mycar.eve() // Require output fordcar engine triggler event
mycar.getEngine() // Rquire output ford car disel type engine object

【讨论】：