For more ES6 speak in class

A, ES5 near the class structure

//ES5中的近类结构
function Person(name) {
    this.name = name;
}
Person.prototype.sayname = function(){
    console.log(this.name);
}
var person = new Person("Tom");
person.sayname();
console.log(person instanceof Person);//true
console.log(person instanceof Object);//true

 Two, ES6 classes

　　JavaScript class ECMAScript2015 introduced essentially JavaScript existing prototype-based inheritance syntax of sugar. Class is actually a "special functions", the same function expressions and function declarations like you can define a class syntax has two components: class expression and class declaration.

(A) class declaration

 　　An important difference between function declaration and the declaration is a function declaration will enhance, not the class declaration. The first thing you need to declare your class, and then access it.

Person {class 
　　// constructor equivalent to Person 
　　constructor (name) { 
　　　　this.name = name; 
　　}    
　　// equivalent to Person.prototype.sayname 
　　sayName () { 
　　　　the console.log (this.name); 
　　} 
}

 The difference between the classes and custom type:

　　1. function declaration can be improved, and let the class declaration and similar statements that can not be improved, before the actual implementation of declarative statements, they will always exist in the temporary dead zone.

　　2. All of the code in the class declaration will automatically run in strict mode, but can not force the code from the strict mode execution.

　　3. In the custom type, it is necessary () method to manually specify a method by Object.defineProperty not enumerable; in the class, all the methods are not enumerable.

　　4. Use the constructor calls the class methods other than keywords new program will lead to throw an error.

　　5. Modify the class name in the class will cause program error.

Simulators statement Code:

the Person = the let (function () {
     " use strict " 
    const the Person = function (name) {
         // make sure this function is called by keyword new new 
        IF ( typeof  new new .target === " undefined " ) {
        　　the throw  new new Error ( " must by calling a constructor new keyword " ); 
        } 
        the this .name = name; 
    } 
    Object.defineProperty (Peron.prototype, " sayName " , { 
    　　value: function () { 
       　　 // make sure that the method does not call the new keyword 
            IF (typeof  new ! .target == " undefined " ) {
            　　the throw  new Error ( " not call the method using the new keyword " ) 
            } 
        　　the console.log ( the this .name); 
    　　}, 
    　　Enumerable: to false , 
    　　Writable: to true , 
       Configurable: to true 
    }) 
    return the Person 
}) ();

 (B) class expressions

　　Class expressions can be named or anonymous, a named class name is an expression of local properties in the class, it may be obtained by name attribute class itself. Class expressions are also subject to the type of class declaration referred to lift restrictions.

//匿名类
let Person = class {
　　constructor(height,width){
　　　　this.height = height;
　　　　this.width = width;
　　}
};
console.log(Person.name);//Person
//具名类
let Person = class Person {
　　constructor(height,width){
　　　　this.height = height;
　　　　this.width = width;
　　}
}
console.log(Person.name);//Person

 (Iii) the definition of classes and methods

　　Class is a class body portion braces {} of the pair, which is where you define the class member, method or constructor. The declaration and the body of the class expressions are performed in strict mode.

　　constructor The method is a constructor for the class, the default is a method which is used to create and initialize objects created by a class, by  new creating a command object instance, the method is invoked automatically. There must be a class  constructor method, if not explicitly defined, a default  consructor method will be added by default. So even if you do not add constructors, but also have a default constructor. General  constructor method returns an instance of the object  this , but you can also specify the  constructor method returns a new object instance of the object so that the return is not an instance of the class.

　　A constructor can use the super keyword to call the constructor of a parent class.

　　Free property is an instance of the property, does not appear on the prototype, and can only be created in the constructor or method in the class, in this case the name attribute is a free, It is recommended that you create all its own property in the constructor , so that only one of all by its own properties can control class.

　　Class declaration is merely based on existing custom type declaration of syntactic sugar, the result of typeof Person final returns "function", so the statement actually creates a function Person has a constructor method behavior. In this example sayName () method is actually a method on Person.prototype

 The role of (four) super keyword

　　super This keyword, either as a function of use, you can also use as a target. In both cases, its use is completely different.

　　1, as a function uses

A {} class 
class A {B the extends 
  constructor () { 
    super ();   // for ES6 claim subclass constructor must perform a super function to avoid an error. 
  } 
}

 　　Note: constructorYou must call the supermethod, because the subclass does not own thisthe object, but inherit the parent class of thisthe object, which is then processed, and superon behalf of the constructor of the parent class. superAlthough representative of the configuration of the parent class A, but returns instance of a subclass of B, i.e. superinside thisrefers to B, so super()here it is equivalent to `` `A.prototype.constructor.call (this, props )` ` .

A {class 
  constructor () { 
    the console.log ( new new .target.name); // new.target point of the currently executing function 
  } 
} 

class B {A the extends 
  constructor () { 
    Super (); 
  } 
} 

new new A () ; // A 
new new B (); // B

 　　It can be seen in  super() the implementation, it points to is the constructor for the subclass of B, rather than A, the parent class constructor. In other words, super() the internal  this point is B

 　　2, as the use of objects

 　　　　In the conventional method, the parent class prototype object point; in a static method, points to the parent class.

class A {
  c() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.c()); // 2
  }
}

let b = new B();

 　　The above code, among B subclass super.c(), is to superas an object to use. At this time, superin the ordinary way point A.prototype, it super.c()is equivalent A.prototype.c().

　　  By  super the time the parent class method calls super binds subclass  this.

class A {
  constructor() {
    this.x = 1;
  }
  s() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.s();
  }
}

let b = new B();
b.m(); // 2

　　　　Code above, super.s() although the call is A.prototytpe.s() , but A.prototytpe.s() binds a subclass of B this , resulting in the output is 2, instead of 1. That is to say, actually executes super.s.call(this) .

　　　　Since the binding subclass  this , so if by  super  assignment to a property, then  super  that is  this the assignment of property will become property of the child class instance.

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

　　　　In the above code, super.x assigned to 3, equivalent to the case of this.x assignment to 3. When the reading super.x time, the call is A.prototype.x , but there is no x way it returns undefined.

　　　　Note that the use of  super  time, must be explicitly specified as a function, or as an object, otherwise it will error.

class A {}
class B extends A {
  constructor() {
    super();
    console.log(super); // 报错
  }
}

 　　　　The above code, console.log(super);among super, can not be seen as a function of use, or use as an object, so when the engine parses JavaScript code will throw an error. This is, if we can clearly show that superthe data type, the error will not.

(Five) static method

　　In ECMAScript5 and earlier, added directly to the constructor method to simulate static members is a common pattern, for example:

function Person(name){
    this.name = name;
}
//静态方法
Person.create = function(name){
    return new Person(name);
}
//实例方法
Person.prototype.sayName = function(){
    console.log(this.name);
}
var person = Person.create("top")
console.log(person);

 

　　Since the factory method, data Person.create () does not depend on the use of the Person instance, it would therefore be considered a static method. ECMAScript6 class syntax simplifies the process of creating static member using static formal comment before the method can access the properties or name. static keyword is used to define a static method of a class. Call the static method does not need to instantiate the class, but not through a static method call instance of the class. Static method is commonly used as a tool to create application function. Need not instantiate the class, this class can be called directly by the process, i.e. is called "static method." The example of this method is not inherited!

Person {class 
　　// equivalent to Person constructor 
　　constructor (name) {
   　　the this .name = name; 
   } 
　　// equivalent to Person.prototype.sayName 
　　sayName () { 
　　　　the console.log ( the this .name) 
　　}
　　// equivalent in Person.create 
　　static the Create (name) {
　　　　return  new new the person (name) 
　　} 
　　static Fund () { 
　　　　return "I am the person in the static method, no need to instantiate, can directly call!" 
　　}

    static b(){ //通过静态方法b来调用静态方法fund console.log(this.a());// }
　　//通过实例方法调用会报错

 　　c(){
        console.log(this.a());//TypeError: this.a is not a function }

} Var Person = new new the Person ( 'Tom' ); 
; var Person = Person.create ( 'Qin') 
the console.log (Person) 
a static method with a static method // keyword before a class of Box, that the method is , you can call directly on the Box class. Static methods can be called only in a static method, you can not call an instance method. 
console.log (Person.fund ()); // I am the person in the static method, no need to instantiate, can be called directly! 
Person.b (); // I am the person in the static method, no need to instantiate, can be called directly!

 　　All methods and properties access class can be used to define the static keyword, the only limitation is not used to define the static constructor method. Can not access the static member in the instance, static members must be accessed directly in the class.

 Static methods of the parent class can be inherited by subclasses:

Box {class 
    static a () { // parent class Box Static method 
        return 'parent class I Static method a' ; 
    } 
} 
class Desk the extends Box {} 
// subclass Desk can directly call the static method of a parent class 
console.log (Desk.a ());

 

 If want to call static methods of the parent class static method subclass, you need to call from the super objects:

Box {class 
    static A () { 
        return 'to adjust the super I was taken out' ; 
    } 
} 
class Desk the extends Box { 
    static A () { 
        return super.a (); 
    } 
} 
the console.log (Desk.a ( ));

 

(F) static properties

Static Class attribute refers to the attribute itself, i.e. Class.propname, rather than defining instance property on the object (this) a.

Box {class 
   constructor () { 
       the this .name = "Instance Properties" 
   } 
} 
Box.prop1 = "static property. 1" ; 
Box.prop2 = "Static Property 2" ; 
the console.log (Box.prop1, Box.prop2); // static property static properties 1 2

(Vii) inherited

　　Before ECMAScript6, requiring multiple steps to achieve inheritance. Son inherited from the Father, in order to do so, must be Father.prototype new object is created with a call to rewrite Son.prototype and Father.call () method.

function Father(length,width){
　　this.length = length;
   this.width = width;
}
Father.prototype.getArea = function(){
　　return this.length * this.width
}
function Son(length,width){
　　Father.call(this,length,width)
}
Son.prototype = Object.create(Father.prototype,{
   constructor:{
      value:Son,
      enumerable:true,
   　　writable:true,
   　　configurable:true
　　}
})
var son = new Son(3,4);
console.log(son.getArea());//12
console.log(son instanceof Son);//true
console.log(son instanceof Father);//true

 

 　　The emergence of class so that we can more easily implement inheritance, using familiar extends keyword can be specified class inherits function. Prototype is automatically adjusted to access the base class constructor by calling super () method.

Father {class 
　　constructor (length, width) { 
   　　the this .length = length;
       the this .width = width; 
   } 
   the getArea () { 
   　　return  the this .length * the this .width 
   } 
　 static Create (length, width) { 
　　　　return new new Father (length, width) 
　　} 
} 
class the extends Father Son { 
　　constructor (length, width) { 
   　　Super (length, width) 
   } 
　　of the same name in the derived class methods // always overwrites the base class in 
　　the getArea () { 
　　　　// if you want to call yl the methods in the class with the same name, you can call super.getArea () method 
　　　　super.getArea () 
　　　　return this.length this.width * 
　　} 

} 
var son = new Son(3,4);
console.log(son.getArea());//12
console.log(son instanceof Son)//true
console.log(son instanceof Father);//true
var obj = Son.create(3,4);

 

 　　Inherit from other classes class is called a derived class, the derived class if specified in the constructor must call super (), if the program will not call an error. If you do not use a constructor, then when you create a new instance of the class it will automatically call super () and pass all the parameters.

the extends Father Son {class 
　　// no constructor 
} 
// equivalent to the 
class the extends Father Son { 
　　constructor (... args) { 
　　　　Super (args ...) 
　　} 
}