ES6 Class一瞥

Class

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

可用性

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

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

Class语法

ES6

1
2
3
4
5
6
7
8
9
10
11
12
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'

以前的方式

1
2
3
4
5
6
7
8
9
10
11
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实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//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的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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'

参考资料

后记

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