Using ES6 Classes
Visit http://weblogs.asp.net/dwahlin/getting-started-with-es6-using-classes for more details.
by Torwan
HTML
<div id="output"></div>
Babel + JSX
class Auto {
constructor(data) {
this.producer = data.producer;
this.model = data.model;
this.year = data.year;
this.price = data.price;
}
getDetails() {
return `${this.year} ${this.producer} ${this.model}`;
}
}
class Car extends Auto {
constructor(data) {
super(data);
this.isElectric = data.isElectric;
this.isHatchback = data.isHatchback;
}
getDetails() {
return `${super.getDetails()} Electric: ${this.isElectric} Hatchback: ${this.isHatchback}`;
}
}
var car = new Car({
producer: 'Ford',
model: 'Mustang',
price: 150000,
year: 2017,
isElectric: false,
isHatchback: true
});
var tractor = new Car({
producer: 'New Holland',
model: 'HS 70000',
price: 1500000,
year: 2016,
isElectric: false,
isHatchback: true
});
var div = document.getElementById('output');
div.innerHTML = car.getDetails();