ES6学习笔记——新增 Class 语法学习

这一篇的内容是纯粹的学习笔记，内容不多也不复杂，小伙伴们几分钟就可以看完啦！

一般来说，我们生成一个实例对象的方法是使用构造函数，如下代码所示：

function Position (x, y) {
    this.x = x
    this.y = y
}

Position.prototype.update = function (newX, newY) {
    this.x = newX
    this.y = newY
}

在 ES6 之前，js 中并没有 “类” 这个概念，而是通过原型链的方式实现了对象的继承

而在 ES6 中引入了 “类”，虽然本质上依然是与之前并没有什么区别，但是它的写法更清晰易理解，也更像面向对象编程的语法

将上面的例子使用class进行改写：

class Position {
    constructor (x, y) {
        this.x = x
        this.y = y
    }

    update (newX, newY) {
        this.x = newX
        this.y = newY
    }
}

上面定义了一个Position类，里面的constructor方法是构造方法，this为实例对象：这就表示，ES5 的构造函数Position对应 ES6 Position类的构造方法

并且Position类中还定义了一个update方法。在定义类方法时，不需要function关键字，函数之间也不需要添加逗号，否则会报错

不管是哪种方式，它们的使用都是通过new命令

constructor 方法

constructor是类的默认方法，new命令会调用该方法生成一个实例。constructor方法必须存在，如果没有显示定义，则会被默认添加

不存在变量提升

需要注意的是，使用class定义类不存在变量提升，所以在使用一个通过class定义的类时，必须保证这个类已经被定义过了

类的继承

通过extends关键字能够实现类的继承

class subPosition extends Position {
    constructor (x, y, desc) {
        super (x, y)
        this.desc = desc
    }
}

子类subPosition必须在constructor中调用super方法，否则将会报错，因为子类没有自己的this对象，而是继承父类的this后进行加工，如果不调用super方法，子类将得不到this，也因此，子类在调用super方法前，将不能使用this

super关键字

super关键字既可以作为方法使用，又可以作为对象使用

• 作为方法

这种情况下，super()只能够在子类的constructor方法中调用，代表调用父类的构造函数

• 作为对象

在普通方法中，super指向父类的原型对象，可以通过super调用到父类原型上的方法

在静态方法中，super指向父类对象

class的getter与setter

在class内部，可以通过get set关键字设置属性的取值和存值方法

class Position {
    constructor (x, y) {
        this.x = x
        this.y = y
    }

    get prop () {
        return 'get a property'
    }

    set prop (value) {
        console.log( 'set a property', value )
    }

    update (newX, newY) {
        this.x = newX
        this.y = newY
    }
}

class的静态方法

在class内部方法的前面加上static关键字，就可以使这个方法成为静态方法，静态方法不会被实例所继承，并且可以直接通过类来调用

最后，祝所有小伙伴端午节快乐！

扫码关注前端周记公众号