Author | Jeskson
Source | Dada front-end bistro
ES - Class
And object-oriented classes:
Object-oriented, that is, all things are objects, object-oriented is what we do to develop a way of thinking development, object-oriented thinking all things are subject to people as an example, what are its characteristics. For example, there are, as well as human behavior name, sex, date of birth, height, etc., in order to eat, sleep. Characteristics and behaviors combined to become human characteristics and behavior of all people have, through these different characteristics and behavior to different values, constitute different people.
Use based programming can reduce maintenance costs class encapsulation is very strong, in many cases, classes and services are loosely coupled, using class makes the code height reuse, class having the property of inheritance, it is the class need to expand, is not required to modify their own, can be carried out using the extended, like reducing the design cost, simple to use.
So what are classes and objects, explain the characteristics of classes ES6, class inheritance, Babel, based on the strain type flow control implementation.
What is the relationship between classes and objects and between them
Packaging ideas
(function() {
let snake = []; // 存放
let food = { x: 0, y: 0 }; // 食物
function move() {
// 移动
}
function getFood() {
// 是否吃到食物
}
function putFood() {
// 放置食物
}
function gameover() {
// 判断游戏结束
}
function init() {
// 入口函数
// 初始化
}
start();
})();class Car {
// 构造函数
constructor(...args) {
console.log(args);
}
}
new Car('蓝色', 2)class Car {
constructor(wheel, color, length, width) {
this.whell = wheel;
this.color = color;
this.length = length;
this.width = width;
this.speed = 0; // 实速
}
// 加速
speedUp() {
this.speed += 1;
}
}
const car = new Car(2, '#000', 23, 45);
console.log(car.color);
console.log(car.spedd);
car.speedUp(); // 加速
console.log(car);Three basic characteristics: polymorphism, inheritance, encapsulation.
Polymorphism, the same interface, behave differently.
Music player class
class AudioPlayer {
constructor(container) {
this.container = document.querySelector(container);
this.songsList = []; // 歌单列表
this.dom = null; // 用于存放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>播放按钮</div>
<div>进度条</div>
`
this.dom = div;
}
bindEvents() {
this.div.querySelector('.btn').addEventListener('click',()=>{
console.log('开始播放');
})
}
render() {
this.container.appendChild(this.dom);
}
}Static methods and static properties
Static properties and static methods, expression getter and setter, class, name attribute and New.target property, es5 analog class.
Static class attributes and static method, there are two characteristics:
Properties and methods are not owned by the instance of the class, only the class itself has; only through the class to call.
With the static keyword to declare a static method
class Car {
static totalCar = 0;
constructor() {
this.speed = 0;
this.errors = 0;
}
speedUp() {
this.speed += 1;
}
// 自检
check() {
console.log('开始');
if(this.errors === 0){
console.log('this');
}
}
// 工厂
static checker() {
console.log('haha');
}
static repair(car) {
console.log('da');
}
}
const car = new Car();
car.checker();
Car.repair(car);
Car.repair('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 properties to provide hooks
to do some extra things get property values and settings when the property value
ES5 getter/setter
Writing get / set methods in the 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('正在访问name');
},
set: function(val) {
console.log('正在修改');
this._name = val;
}
});class Person {
constructor() {
this._name = '';
}
get name() {
console.log('getname);
return `名字${this._name}`;
}
set name(val) {
console.log('name');
this._name = val;
}
}
const person = new Person();
person.name = '炸';
console.log(person.name);class AudioPlayer {
constructor() {
this._status = 0;
this.status = 0;
}
get status() {
return this._status;
}
set status(val) {
const StatusMap = {
0: '暂停',
1: '播放',
2: '加载中'
};
document.querySelector('#app. play-btn').innerText = StatusMap[val];
this._status = val;
}
}The name attribute and property new.target
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('使用new调用car');
}
}
new Car();function Car() {
if(!(this instanceof Car)) {
throw Error('new');
}
}
new Car();Use ES5 Simulators
// 构造函数
class Car {
constructor() {
}
}
function Car() {
}
new Car();function Person(name, age) {
this.name = name;
this.age = age;
}
new Person('张三', 12);Create an empty object, the prototype property of the constructor as a prototype empty object, this assignment for this empty object, execute the function, if the function does not return a value, this is returned
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);// 重载
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
});ES5 Inheritance
// 利用构造函数
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);❤️ Do not forget to leave your footprints learning [collection point Like Comment]
Author Info:
[Author]: Jeskson
No public [original]: Dada front-end bistro.
[Reserved] Description: reproduced please indicate the source, thank you! ~
On the current content of the article that is involved in front-end, PHP knowledge, if you are interested to follow, very honored, can you find really identify what the British! Also thank you for your attention in the coming days, hoping been quietly supporting me, I will try to write more good works. We grow together, learn from the zero-based programming, the user-friendly front-end Web presentation areas, data structures and algorithms, network theory, etc. to the junior partner. Share Web front-end related technical articles, tools, resources, course selection, hot information.
If this number of local contents do not get bits (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.
Please thumbs up! Because you agree / encouragement is the greatest power of my writing!
Welcome attention to Dada 's CSDN!
This is a quality, attitude blog
