Apr 5 2015

ES6 Class一瞥

Class

ES6的class提供了一个简洁的语法糖来实现之前通过原型链来实现的Class的功能。

可用性

截止目前（2015-04-05)，Class目前还基本没有浏览器支持，除了Firefox39最新版已经实现了。具体的支持情况可以在这里看到：ECMAScript compatibility table

可以通过Traceur来试验Class的功能。

Class语法

ES6

class Person {
    constructor(name,age) {
        this.name = name,
        this.age = age
    }
    sayHi() {
        console.log('Hi, my name is '+ this.name);
    }
}

var ray = new Person('ray',21);
ray.sayHi(); //'Hi, my name is ray'

以前的方式

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHi = function() {
    console.log('Hi, my name is '+ this.name);
}

var ray = new Person('ray', 21);
ray.sayHi(); //'Hi, my name is ray'

Class实现继承

继承是通过extends关键字和super实现的。

//inheritance
class Female extends Person {
    constructor(name, age) {
        super(name, age);
    }

    sayHi() {
        // call Person.sayHi()
        super.sayHi();

        // add a new log
        console.log('meow');
    }
}

var joanna = new Female('joanna', 26);
joanna.sayHi();
//'Hi, my name is joanna'
//'meow'

ES5的写法

var Female = function (name, age) {
    Person.call(name, age);
    this.name  = name;
    this.age = age;
};
Female.prototype = Object.create(Person.prototype);
Female.prototype.sayHi = function() {
    Person.prototype.sayHi.call(this);
    console.log('meow');
}

var joanna = new Female('joanna', 26);
joanna.sayHi();
//'Hi, my name is joanna'
//'meow'

参考资料

• ECMAScript compatibility table
• ECMAScript 6 support in Mozilla
• An introduction to ES6 classes
• Traceur - Getting Started

后记

啊我为什么会写ES6 Class呢，因为好玩呗 其实这是一篇命题作文 (逃

ES6, Javascript