How can I do Inheritance in reactjs function object?

Question

How can I do Inheritance in Reactjs, I am working on canvas based app. I need to create object and extend and add some stuff and events for this I tried to make basic code for example. This is what I have tried but dosen't work, I wanna know what should I do to achieve this

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

By mistake, actually I code this only for posting here, my original issue was canvas based, and I post simple logic question. — Amit Shakya
– Amit Shakya, Commented Dec 27, 2020 at 20:48
If you can include your canvas-related code, it may be easier to understand the inheritance you're trying to achieve. With your simple logic example, it would be recommended to use classes instead of functions. — Ric
– Ric, Commented Dec 27, 2020 at 20:55

Emiel Zuurbier · Accepted Answer · 2020-12-28 17:36:49Z

You're mixing up some syntaxes. The extends keyword can only be used when using the class syntax. It basically does the same thing as a function constructor, but it's a syntactic sugar layer added in ES6 to create object constructors more easily.

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

Or use the classical way of extending functions by inheriting the prototype. This is basically the same thing which happens with the class but with more steps to perform.

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

Collectives™ on Stack Overflow

How can I do Inheritance in reactjs function object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related