了解ES6的 Class类

ES6的Class可以看作是语法糖，绝大部分功能，ES5都可以做到，新的class写法只是让语法更加清晰，更像面向对象编程的语法。    

//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方法就是构造方法，而this关键字代表示例对象，
      定义类的方法，不需要加上function关键字，方法之间不需要逗号分割，否则会报错。
      ES6的类，完全可以看作构造函数的另一种写法，使用的时候也是使用new命令。
      构造函数的prototype属性在ES6的类上面继续存在，类里面定义的方法事实上都定义在prototype属性上面
      类必须使用new来调用，否则会报错，普通的构造函数可以直接调用
    */

    //ES6写法
    class Fs{
        constructor(a,b) {
            this.a = a,
            this.b = b
        }
        fs(a,b) { return console.log(this.a * this.b) }
    }
    
    let on = new Fs(2,2);   //同es5一样，使用new来生成实例

    on.fs() 
    //在类的实例上调用方法，其实就是在原型上调用方法
    console.log(Fs.prototype)   //{constructor: ƒ, fs: ƒ}

    //由于类的方法都定义在prototype属性上面，所以我们可以使用Object.assign来添加多个方法
    Object.assign(Fs.prototype,{
        a(){},
        b(){}
    })
    console.log(Fs.prototype)       //{a: ƒ, b: ƒ, constructor: ƒ, fs: ƒ}

    //prototype.constructor指向的就是类的本身，这与es5是一致的
    console.log(Fs.prototype.constructor == Fs) //true



    /*
        constructor方法是类的默认方法，通过new生成对象实例时，自动调用该方法，一个类必须要有constructor方法，
        如果没有显示的定义，那么一个空的constructor方法会被自动添加。
        constructor方法默认返回实例对象(this)，也可以指定返回另一个对象
    */

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


    
    //类的继承
    //类的继承可以使用extens关键字实现继承，这比ES5的通过修改原型链来继承要方便的多
        class Poin{
            constructor(){
                this.a = '我是a',
                this.b = '我是b'
            }
            extn(){console.log("我是父类")}
        };
        class ClassPoin extends Poin{
            //entends可以继承父类所有的属性和方法
            constructor(...s){
                //使用super方法来接受父类的属性，我在这里使用了es6的剩余参数，可得到所有的参数
                //子类的构造函数必须执行一次super()
                //es6会将父类实例对象的方法属和性绑定到this上，所以必须先要调用super方法，再用子类的构造函数修改this，否则会报错
                super(...s); 
                
                this.m = '我是子类m',
                this.a = '我是子类的a'
            }
            //如果定义一个与父类相同的方法或者属性，那么优先会使用自己本身的方法以及属性
            extn(){console.log("我是子类")}
        }

        let o = new ClassPoin();
        o.extn();   //我是子类
        console.log(o.a,o.b,o.m)    //我是子类的a 我是b 我是子类m