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

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值