美文网首页
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

    传统写法: ES2015写法: 1、constructor方法 constructor方法是类的默认方法,通过ne...

  • 第六节:TypeScript类

    Class 类 TypeScript 支持ES2015中引入的关键字class 与其他JavaScript语言功能...

  • Node.js与ES6速记

    ES2015新特性速记: 新的变量名let,常量名const 类关键字class、extends、super 模版...

  • 为ES2015解构干杯

    我认为ES2015解构语法相当酷炫。他虽然没有像Promises,Generators以及Class语法那么上镜头...

  • ES2015(ES6)

    阮一峰 ES2015给 JavaScript 初心者的 ES2015 实战 ECMAScript 6(以下简称ES...

  • React学习日记

    es2015版本:

  • 浏览器环境 兼容运行ES6语法

    ES6语言的普及 2015年6月, ES2015(即 ECMAScript 6、ES6) 正式发布。ES2015 ...

  • ES6 实现自己的 Promise

    一、JavaScript 异步编程背景 从去年 ES2015 发布至今,已经过去了很久,ES2015 发布的新的语...

  • 对象字面量扩展

    ES2015之前的ECMAScript标准中,对象字面量只是一种用于表达对象的语法。而在ES2015中,ECMAS...

  • 关于node 你需要学习的内容(转)

    使用 ES2015。在 Node.js v6 版本已经支持 99% 的 ES2015 语法,这样你就可以放心去掉对...

网友评论

      本文标题:ES2015 Class

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