ES6之Class的常用功能解读

ES5传统写法

{
    //构造函数法
    function Point(x, y) { 
        this.x = x;
        this.y = y;
    }
}

ES6写法——class写法

class写法更加清晰，可以将它看做语法糖。能够让对象原型的写法更像‘面向对象’的语法。

{
    // 基本定义和生成实例
    class Parent {
        //构造函数
        constructor(name = 'zhangwen') {
            this.name = name;
        }
    }

    let z_Parent = new Parent('zhang');
    console.log(z_Parent);    //zhangwen
}

Class的继承

Class之间可以通过extends关键字实现继承

疑问：子类如何覆盖父类的值呢？‘继承’时如何修改父类的参数？

回答：用super关键字。注意：在继承关系中，子类的构造函数如果用到super，必须将它放在第一行！！

    class Parent {
        constructor(name = 'zhangwen') {
            this.name = name;
        }
    }

    // 通过关键词Extends实现继承
    class Child extends Parent {
      constructor(name = 'child') {

          //super必须在this.type的前面！
          super(name);
          this.type = 'child'; 
   }
    console.log('继承', new Child);    //child

Class的取值函数和存值函数

· getter

· setter

    class Parent {
        constructor(name = 'zhang') {
            this.name = name;
        }

        //注意：这里的'get'是属性，不是函数!
        get longName() { 
            return this.name;
        }

        set longName(value) {
            this.name = value;
        }
    }

    let z = new Parent();
    console.log('getter', z.longName);  //zhang

    z.longName = 'Greta';
    console.log('setter', z.longName)   //Greta

Class的静态方法和静态属性

　　如果在一个方法前加上static关键字，就表示该方法不会被实例继承，而是直接通过类调用，称为“静态方法”。

注意：static只能用来定义静态方法！不涉及静态属性！

{
    class Parent {
        //构造函数
        constructor(name = 'getter-test') {
            this.name = name;
        }

        // 静态方法 (通过类去调用，而不是通过类的实例去调用)。
        static tell() {
            console.log('tell');
        }
    }
    Parent.tell();

    let z = new Parent();
    z.tell();     //报错!因为只能在parent类上调用，不能在实例上调用

    // 静态属性的功能直接在类上定义即可
    Parent.type='test';
    console.log('静态属性',Parent.type);   // test

}