ES6 Foundation - ES6 class

Author| Jeskson

Source|Dada Front End Bistro

ES - Class

Classes and Object Oriented:

Object-oriented, that is, everything is object. Object-oriented is a way of developing our thinking. Everything is object in object-oriented thinking. Take human as an example, what are its characteristics.Examples include name, gender, birth year, height, and behavior of people to eat and sleep.Characters and behaviors become human when they are combined. They are common to all people and form different people by giving different values to them.

Programming with classes can reduce maintenance costs. Class encapsulation is very strong. In many cases, classes and businesses are low-coupled, using classes can make code highly reusable, and classes are inherited. Therefore, classes need to be expanded, they do not need to modify themselves, so they can be extended. The use of classes reduces design costs and is simple to use.

Then what are classes and objects, explain the characteristics of classes in ES6, inheritance of classes, Babel, implementation of deformable classes based on process control.

What are classes and objects and their relationships

The idea of encapsulation

(function() { let snake = []; // Deposit let food = { x: 0, y: 0 }; // food function move() { // move } function getFood() { // Whether to eat food or not } function putFood() { // Place food } function gameover() { // Judging Game End } function init() { // Entry function // Initialization } start(); })();

class Car { // Constructor constructor(...args) { console.log(args); } } new Car('blue', 2)

class Car { constructor(wheel, color, length, width) { this.whell = wheel; this.color = color; this.length = length; this.width = width; this.speed = 0; // Real Speed } // accelerate speedUp() { this.speed += 1; } } const car = new Car(2, '#000', 23, 45); console.log(car.color); console.log(car.spedd); car.speedUp(); // accelerate console.log(car);

Three basic features: polymorphism, inheritance, encapsulation.

Polymorphism, the same interface, has different behavior.

Music Player Class

class AudioPlayer { constructor(container) { this.container = document.querySelector(container); this.songsList = []; // List of Songs this.dom = null; // For storing dom this.audio = new Audio(); this.status = 0; this.getSongs(); this.createElement(); this.bindEvents(); this.render(); } getSongs() { this.songsList = [ { cover: '', url: .mp3, singer: {}, name: '' } ]; } createElement() { const div = document.createElement('div'); div.innerHTML = ` <div>Play button</div> <div>Progress bar</div> ` this.dom = div; } bindEvents() { this.div.querySelector('.btn').addEventListener('click',()=>{ console.log('Start Playing'); }) } render() { this.container.appendChild(this.dom); } }

Static methods and static properties

Static properties and static methods, getter s and setter s, expression of classes, name properties and New.target properties, simulation classes in es5.

Static attributes and methods in classes have two characteristics:

Properties and methods that are not owned by instances of a class, only by the class itself; they can only be called through the class.

Declare a static method with the static keyword

class Car { static totalCar = 0; constructor() { this.speed = 0; this.errors = 0; } speedUp() { this.speed += 1; } // Self-Test check() { console.log('start'); if(this.errors === 0){ console.log('this'); } } // factory static checker() { console.log('haha'); } static repair(car) { console.log('da'); } } const car = new Car(); car.checker(); Car.repair(car); Car.repair('1 No. 1 Car');

class Person { } Person.format = programmer => { programmer.haveGirlFriend = true; programmer.hair = true; }; class Programmer { constructor() { this.haveGirlFriend = false; this.hair = false; } } const programmer = new Programmer(); console.log(programmer);

Class expression:

const Person = class P { constructor() { console.log('dada'); } } new Person();

Function expression:

const a = function() { }

Function declaration:

function a() { }

getter and setter

getter,setter Similar to providing a hook to an attribute Do something extra when getting and setting property values

ES5 getter/setter

Writing get/set methods in object literals Object.definedProperty

const obj = { _name: '', get name() { return this._name; }, set name(val) { this._name = val; } } obj.name = 3;

Object.definedProperty

var obj = { _name: '' }; Object.definedProperty(obj, 'age', { value: 12, enumerable: true }); var i; for(i in obj) { console.log(i); } console.log(obj);

var obj = { _name: '' }; Object.defineProperty(obj, 'name', { get: function() { console.log('Visiting name'); }, set: function(val) { console.log('Modifying'); this._name = val; } });

class Person { constructor() { this._name = ''; } get name() { console.log('getname); return `Name $`; } set name(val) { console.log('name'); this._name = val; } } const person = new Person(); person.name = 'Frying'; console.log(person.name);

class AudioPlayer { constructor() { this._status = 0; this.status = 0; } get status() { return this._status; } set status(val) { const StatusMap = { 0: 'suspend', 1: 'play', 2: 'Loading' }; document.querySelector('#app. play-btn').innerText = StatusMap[val]; this._status = val; } }

name property and new.target property

class Person { } console.log(Person.name); const da = class d { } console.log(da.name);

class Car { constructor() { console.log(new.target); } } new Car();

function Car() { if(new target !== Car) { throw Error('Use new call car'); } } new Car();

function Car() { if(!(this instanceof Car)) { throw Error('new'); } } new Car();

Using ES5 simulation classes

// Constructor class Car { constructor() { } } function Car() { } new Car();

function Person(name, age) { this.name = name; this.age = age; } new Person('Zhang San', 12);

Creates an empty object, takes the prototype property of the constructor as the prototype of the empty object, this is assigned to the empty object, executes the function, and returns this if the function does not return a value

function Constructor(fn, args) { var _this = Object.create(fn.prototype); fn.apply(_this, args); }

function Constructor(fn, args) { var _this = Object.create(fn.prototype); var res = fn.apply(_this, args); return res ? res : _this; } function Person(name, age) { this.name = name; this.age = age; } Person.prototype.say = function() { console.log('dada' + this.name); } var person = Constructor(Person, ['da', 12]); console.log(person);

// heavy load class SimpleCalc { addCalc(...args) { if(args.length === 0) { return this.zero(); } if(args.length === 1){ return this.onlyOneArgument(args); } return this.add(args); } zero() { return 0; } onlyOneArgument() { return args[0]; } add(args) { return args.reduce((a,b) => a+b,0); } } function post(url, header, params) { if(!params) { params = header; header = null; // undefined } } post('http:...' , { a:1, b:2 });

Inheritance in ES5

// Using constructors function P() { this.name = 'parent'; this.gender = 2; this.say = function() { console.log('ddd'); } } P.prototype.test = function() { console.log('da'); } function C() { P.call(this); this.name = 'child', this.age = 11; } C.prototype = new P(); var child = new C(); child.say();

Babel is a JavaScript compiler

const add = (a,b) => a+b; alert(add(1,2)); alert(add(3,4)); class Person { static aa = 1; bb = 2; static A() { alert('b'); } constructor() { } }

class Car { static total_car = 0; color='#000'; constructor(color) { Car.total_car += 1; this.color = color; } } new Car(); new Car(); new Car(); console.log(Car.total_car);

2 December 2019, 02:02 | Views: 4284