More Related Content Similar to Classing up ES6 - Web Directions code 2015 (1) (20) Classing up ES6 - Web Directions code 2015 (1)3. Remember when we wrote
JS like this...
<a href="mypage.html" onclick="alert('no, you cannot go to my page'); return;">
Go to my page
</a>
5. Moving forward we started
getting structured
function UserManager(){
this.userDetails = {};
}
UserManager.prototype.setName = function( firstName, lastName ) {
return this.userDetails.name = firstName + ' ' + lastName;
};
var billy = new UserManager();
billy.setName('Billy', 'Smith');
console.log(billy);
9. The industry have been
making classes in JS
Mootools
var MyClass = new Class(properties);
Ember
App.Person = Ember.Object.extend({
jQuery
jQuery.extend(target [,object1] [,objectN])
React
React.createClass({
Angular
var HelloWorld = angular.module("Demo", []);
HelloWorld.factory("FooBar", function() {});
14. Inheritance
class car extends engine {
}
var myCar = new car();
car.start();
car.stop();
class engine {
start() {
this.engineStatus = 'on';
}
stop() {
this.engineStatus = 'off';
}
}
15. Inheritance
class car extends engine {
}
var myCar = new car();
car.start();
car.stop();
class engine {
start() {
this.engineStatus = 'on';
}
stop() {
this.engineStatus = 'off';
}
}
16. Constructors
class car extends engine {
constructor() {
this.start();
}
}
var myCar = new car();
car.stop();
class engine {
start() {
this.engineStatus = 'on';
}
stop() {
this.engineStatus = 'off';
}
}
17. Constructors + Inheritance
class car extends engine {
constructor() {
super();
}
}
var myCar = new car();
class engine {
constructor() {
console.log('engine initiated');
}
}
//output: engine initiated
18. Constructors + Inheritance
class car extends engine {
constructor() {
super();
}
}
var myCar = new car();
class engine {
constructor() {
console.log('engine initiated');
}
}
//output: engine initiated
19. Getters/Setters
class car extends engine {
constructor(engineSize, engineFuel) {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}
20. Getters/Setters
class car extends engine {
constructor(engineSize, engineFuel) {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}
21. Default parameters
class car extends engine {
constructor(engineSize = 'v8', engineFuel = 'Petrol') {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car();
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0];
this.fuel = data[1];
}
}
22. Default parameters
class car extends engine {
constructor(engineSize = 'v8', engineFuel = 'Petrol') {
this.stats = [
engineSize,
engineFuel
];
}
}
var myCar = new car();
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0];
this.fuel = data[1];
}
}
23. Rest Parameters
class car extends engine {
constructor(...engineData) {
this.stats = engineData;
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}
24. Rest Parameters
class car extends engine {
constructor(...engineData) {
this.stats = engineData;
}
}
var myCar = new car(
'v6',
'Kerosene'
);
class engine {
get stats() {
return {
'size': this.size || 'v8',
'fuel': this.fuel || 'Petrol'
}
}
set stats(data) {
this.size = data[0] || 'v8';
this.fuel = data[1] || 'Petrol';
}
}
25. Arrow functions
class App {
constructor() {
var request = new XMLHttpRequest();
request.open('GET', 'my-api/endpoint', true);
request.onreadystatechange = () => {
if (request.readyState != 4 || request.status != 200) return;
this.data = request.responseText;
this.startApp();
};
request.send();
}
this.startApp() { }
}
26. Arrow functions
class App {
constructor() {
var request = new XMLHttpRequest();
request.open('GET', 'my-api/endpoint', true);
request.onreadystatechange = () => {
if (request.readyState != 4 || request.status != 200) return;
this.data = request.responseText;
this.startApp();
};
request.send();
}
this.startApp() { }
}
27. Arrow functions
class App {
constructor() {
var request = new XMLHttpRequest();
request.open('GET', 'my-api/endpoint', true);
request.onreadystatechange = () => {
if (request.readyState != 4 || request.status != 200) return;
this.data = request.responseText;
this.startApp();
};
request.send();
}
this.startApp() { }
}