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');
Car.Attribute name=Attribute value;
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 ${this._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);

Don't forget to leave a footprint of your studies [favorite collection reviews]

Author Info:

[Author]: Jeskson

Original Public Number: Dada Front End Bistro.

[Reprint instructions]: Please explain the source of reprinting, thank you for your cooperation!~

About the current article content refers to the front-end, PHP knowledge points, if you are interested, you can pay attention to it. It is an honor to be discovered by you. It is really wise-eyed!Thank you for your attention. In the future, I hope to be able to support me silently, and I will try to write more excellent works.We grew up together, programmed from zero basics, and presented our small partners with easy-to-understand Web front-end domains, data structures and algorithms, and network principles.Share Web front-end related technical articles, tool resources, selected courses, hot spot information.

If there are inadequacies in this number (e.g. copyright or other issues), please contact us in time to make corrections, which will be dealt with at the first time.

Please compliment!Because your approval/encouragement is my greatest motivation to write!

Welcome to your attention Dada CSDN!

This is a quality, attitudinal blog

Tags: Front-end Attribute Programming Javascript PHP

Posted on Mon, 02 Dec 2019 02:02:27 -0500 by amity