ES2015 Class

传统写法：

//old way
function User(username, email) {
    this.username = username;
    this.email = email;

    //not shared method, not recommended
    // this.changeEmail = function(email) {
    //  this.email = email;
    // }
}

//shared method
User.prototype.changeEmail = function(email) {
    this.email = email;
}

var user = new User('Jack', 'jack@163.com');

user.changeEmail('jack@qq.com');

console.dir(user);

ES2015写法：

//new style, sugar syntax
class NewUser {
    //constructor initial variables
    constructor(username, email) {
        this.username = username;
        this.email = email;
    }

    //commom method
    changeEmail(email) {
        this.email = email;
    }

    // static register(name, email) {
    //  return new NewUser(name, email);
    // }

    //static methoad
    static register(...args) {
        return new NewUser(...args);
    }

    //getter & setter
    get foo() {
        return 'bar';
    }

   //getter & setter
    set bar(name) {
        this.name = name;
    }
}

let user2 = new NewUser('Nike', 'nike@qq.com');
user2.changeEmail('nike@gmail.com');

user2.bar = 'Hello'

console.dir(user2);

// console.dir(NewUser.register('jack', 'jack@qq.com'));

1、constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

2、静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

3、取值函数（getter）和存值函数（setter）

与ES5一样，在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

ES2015 Class

推荐阅读更多精彩内容