CODEWITHSUNDEEP
javascriptreactjsinheritancejsx
Amit Shakya
Amit Shakya

Reputation: 994

How can I do Inheritance in reactjs function object?

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

Upvotes: 0

Views: 72

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20934

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

Upvotes: 2

Related Questions