如何在reactjs函数对象中进行继承？
如何在reactjs函数对象中进行继承？
提问于 2020-12-28 04:25:51
我如何在Reactjs中进行继承，我正在开发基于canvas的应用程序。我需要创建对象，扩展和添加一些东西和事件，例如，我试着做一些基本的代码。这就是我试过但没有用的东西，我想知道我该怎么做才能做到这一点
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回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-28 04:55:53
你混淆了一些语法。只有在使用class语法时，才能使用extends关键字。它基本上与函数构造函数做同样的事情，但它是在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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65470122
复制相关文章
相似问题
腾讯云开发者
