Static methods using class inheritance class ES6 class class modular development

Foreword

• In the ES6, class (category) is introduced as a template objects, defined by class keyword class.
• It is the essence of class function.
• javascript, the base class is called the lowest class (BaseClass), subclass parent, the parent class the parent class's parent class collectively, it will be directly under the parent class is called a subclass of the super class (SuperClass).
• The class can be seen as a syntactic sugar, so that the wording of the prototype of an object more clearly, like object-oriented programming syntax.

Basic usage

• Class by class declaration, the class name capitalized, camel named
• Some constructors can have multiple languages, native js only one constructor, and the constructor of all classes written as constructor function
• The constructor is executed when the constructor instantiated
• The object constructor is the current class name

class Box{
    a=1;//ES7支持
    constructor(a,b){
        // 构造函数
        // this.a=1;
        console.log(a+b);//8
    }
    play(){
		console.log("play");
    }
}
// 实例化,当实例化时执行构造函数constructor
let b=new Box(3,5);
console.log(b);
// 对象的构造函数就是当前的类名
console.log(b.constructor===Box);//true

Because js in the constructor is the class name, so we can be judged according to whether the object's constructor is a class name if he belongs to the class; constructor name attribute is the class name of the class

• constructor can only be used to determine whether the object belongs to a superclass
• instanceof can be determined whether the object belongs to a parent class

var arr=new Array(1,2,3);
//构造函数的name属性就是这个类的类名
console.log(arr.constructor.name);//Array
console.log(arr.constructor===Array);//true

var reg=/a/g;
console.log(reg.constructor===RegExp);//true

var div=document.createElement("div");
console.log(div.constructor===HTMLDivElement);//true
console.log(div.constructor===HTMLElement);//false
console.log(div.constructor===Element);//false
console.log(div instanceof HTMLDivElement);//true
console.log(div instanceof HTMLElement);//true
console.log(div instanceof Element);//true
console.log(div instanceof EventTarget);//true
console.log(div instanceof Node);//true
console.log(div instanceof Object);//true

The use of class

• By constructor to instantiate an object, the object is an instance of this class, so this instance of the object to have all the attributes and methods of class, you can call his own methods and properties of the
• In addition to the class variable is a function of local properties of the class
• Class this refers to an instance of an object, who calls the method, this is a function of that instance of the object class
• Because a default constructor to generate an instance object can not be used to return else return in the constructor, i.e., no write return constructor

Case: randomly generated page sizes, different color div

//生成随机颜色
function randomColor(){
    var col="#";
    for(var i=0;i<6;i++){
        col+=Math.floor(Math.random()*16).toString(16);
    }
    return col;
}

//定义一个叫做Rect的类
class Rect{
    elem;
    //当实例化生，自动执行constructor函数
    constructor(w,h,c){
        this.elem=this.createRect(w,h,c);
    }
    //通过参数创建div
    createRect(w,h,c){
        let div=document.createElement("div");
        Object.assign(div.style,{
            width:w+"px",
            height:h+"px",
            backgroundColor:c
        });
        return div;
    }
    appendTo(parent){
        parent.appendChild(this.elem);
    }
}

for(var i=0;i<10;i++){
    var w=Math.floor(Math.random()*50+50);
    //实例化Rect
    let rect=new Rect(w,w,randomColor());
    rect.appendTo(document.body);
}

Class inheritance

• Extends to the use of derived class inherits the parent class, you must call the superclass constructor in the constructor
• After inheriting sub-class has all the properties and methods of the superclass, including superclass static properties and static methods

class A{
    s=10;
    run(){
        console.log("aaa");
    }
    play(){
		console.log("play");
	}
}
//class B 继承class A
class B extends A{
    constructor(){
    	//继承后，必须在构造函数中调用超类的构造函数
        super();
    }
    run(){
    	//先执行超类的run方法,再继续执行下面的内容
        super.run();
        console.log("bbbb");
    }
    //因为子类的方法与父类的方法相同,因此会覆盖父类的方法
    play(){
		console.log("A的play方法被覆盖了");
	}
}
//实例化class B
let b=new B();
b.run();

Use static class

• Use the static properties declared static class, do not change according to an attribute of an object instance to change
• Static properties and methods of a class can be seen as global variables and methods
• This method is not a static method of a class instance of an object for use in this class name, so we do not usually use this static method, the direct use of the class name
• Static method can not call an instance method
• Static methods are stand alone other instances of an object method
• Static method to solve the problem of a certain type of method
• Subclass inherits the superclass, the subclass has all the properties and methods of the superclass, including superclass static properties and static methods

Note: static only ES7 more support, using static reports an error in the browser version low

static method call can not instantiate an object of class

class Box{
	static a=1;
	a=10;
	constructor(){
		
	}
	static play(){
		console.log("aa");
	}
	play(){
		console.log("ss");
		console.log(this.a);
	}
}

let b=new Box();
b.play();//ss 10

Array push (), pop (), shift (), slice () ... are all examples of object methods; from (), isArray () is a static method.

var arr=[1,2,3,4];
arr.pop();
Array.from(arr);
Array.isArray(arr);

After a subclass inheritance, with the superclass of all static properties and methods

class A{
    static s=10;
    static run(){
        console.log("aaa");
    }
}
//class B 继承class A
class B extends A{
    constructor(){
    	//继承后，必须在构造函数中调用超类的构造函数
        super();
    }
}

console.log(B.s);// 10
B.run();// aaa

Modular Development

Js file in the class, you need to write export default class class name, which means the default class is derived XX, when introduced in the page write import the class name from "relative path ./js/ file."

export default class Box{
    s=10;
    constructor(){
		//...
    }
    run(){
        console.log("aaa");
    }
}
//引入类
import Box from "./js/Box.js"

• If there are multiple classes js file class, or not written in the default file js, the introduction page class, the class name enclosed in {} needed, it may be introduced into a plurality of classes.
• When introduced into a plurality of classes, the class names separated by commas

export class Box{
    s=10;
    constructor(){
		//...
    }
    run(){
        console.log("aaa");
    }
}
//引入类
import {Box} from "./js/Box.js";
import {Main,Ball} from "./js/Main.js";