Learn ES6 class of Class

ES6 the Class can be seen as syntactic sugar, most of the functionality, ES5 can do, just let the wording of the new class syntax clearer, more like object-oriented programming syntax.    
//ES5写法
    function Fn(a,b){
        this.nam = 'nam';
        this.a = a;
        this.b = b;
    }
    Fn.prototype.lis = function() {  return console.log(this.a * this.b)}

    let fn = new Fn(2,2);
    fn.lis ();


    / * Constructor method is the constructor, and this represents the key example of the object,
      The method of the class definition, do not need to add keywords do not need a comma-delimited between function, method, otherwise it will error.
      ES6 class, and it can be seen as another way constructor is used when using the new command.
      prototype property constructor continues to exist in the above class ES6, the method of the class definition are in fact defined above prototype property
      You must use the new class to call, otherwise it will error, general constructor can be called directly
    */

    // ES6 writing 
    class Fs {
        constructor(a,b) {
            this.a = a,
            this.b = b
        }
        fs(a,b) { return console.log(this.a * this.b) }
    }
    
    ON the let = new Fs of (2,2 &);    // Like es5, used to generate a new instance

    on.fs() 
    // call the method on the instance of the class, calling methods on the fact that the prototype 
    the console.log (Fs.prototype)    // {constructor: ƒ, FS: ƒ}

    // Since the method are defined in the class prototype property above, we can use multiple methods to add Object.assign 
    Object.assign (Fs.prototype, {
        a(){},
        b(){}
    })
    console.log(Fs.prototype)       //{a: ƒ, b: ƒ, constructor: ƒ, fs: ƒ}

    // prototype.constructor point is the class itself, which is consistent with es5 
    console.log (Fs.prototype.constructor == Fs) // to true



    /*
        is the default constructor of the class method, by generating new new object instance, the method is automatically invoked, you must be a class constructor method,
        If the display is not defined, then an empty constructor method will be added automatically.
        The default constructor method returns an instance of an object (this), you can specify another object return
    */

    class Foo {
        constructor() {
            return Object.create(null);
        }
    }
    new Foo() instanceof Foo
    //false


    
    // inherited class 
    // class inheritance can be used extens keyword implementation inheritance, than ES5 to inherit more convenient to modify the prototype chain 
        class Poin {
            constructor(){
                the this II.A = 'I A' ,
                 the this .B = 'I b'
            }
            EXTN () {the console.log ( "I is the parent class' )}
        };
        class ClassPoin extends Poin{
            // entends parent class can inherit all the attributes and methods 
            constructor (S ...) {
                 // super command to accept the attributes of the parent class I used here es6 the remaining parameters, all parameters can be obtained 
                // sub constructor of the class must perform a super () 
                // ES6 will be the parent class instance object's methods and properties belong to bind to this, we must first call the super method, and then modify the constructor of a subclass of this, otherwise it will given 
                super (... s);
                
                the this .m = 'subclass I m' ,
                 the this II.A = 'I is a subclass of a'
            }
            // If you define a method with the same or property of the parent class, then the priority will be to use their own methods and attributes 
            extn () {console.log ( "I am a Subclass" )}
        }

        let o = new ClassPoin();
        o.extn ();    // I is a subclass of 
        the console.log (OA, OB, OM)     // I subclass I a I b is a subclass m

 

 

Guess you like

Origin www.cnblogs.com/wangyao521/p/11797178.html