美文网首页
ES2015 Class

ES2015 Class

作者: zshanjun | 来源:发表于2017-04-18 19:32 被阅读148次

    传统写法:

    //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

          本文链接:https://www.haomeiwen.com/subject/mgsqzttx.html