ES6学习笔记之Class

Learning Card

  • Class的用法
    • class关键字来定义
    • 内部有constructor方法
    • 类的方法直接在内部写
  • Class的继承
    • extends关键字表示继承
    • 构造器内子类super父类的属性

Class的用法

JavaScript和传统的面向对象语言在生成实例对象的方法上有很大差异。在JavaScript创建对象的文章里可以看到,JavaScript有很多种实现创建对象的方法,最常用的是组合构造函数方式与原型方式。

1
2
3
4
5
6
7
8
9
10
function User(name, pass) {
this.name = name;
this.pass = pass;
}

User.prototype.showName = function() {
console.log("name: " + this.name);
}

var usr1 = new User("Tom", 123456);

ES6提出了一种更接近传统语言的写法,并且引入了Class(类)这个概念,作为对象的模板。

1
2
3
4
5
6
7
8
9
10
11
class User {
constructor(name, pass) {
this.name = name;
this.pass = pass;
}

showName() {
console.log("name: " + this.name);
}
}
var usr1 = new User("Tom", 123456);

事实上,ES6的类并不是真正的类,而是一个语法糖,但总体来说,它的写法还是方便了很多。

Class的特征:

  • class关键字来定义类(类后面不用跟参数)
  • 类内部有constructor方法,即构造器,它来定义类的属性
  • 类的方法直接在内部写,不用加prototype
注意点:
  • 类的方法直接写成函数名+(),不用加function关键字
  • 方法和属性之间不用,
为类添加多个方法

当需要给一个类添加多个方法的时候,我们可以把每个方法都分别添加到User.prototype上,但是这样比较麻烦,这里可以用到我们前面在对象的扩展里提到的Object.assign方法

1
2
3
4
Object.assign(User.prototyper, {
fn1(){console.log(1)},
fn2(){console.log(2)}
})

Class的继承

相比起类本身,在ES6中,类的继承的写法更为优雅。我们接着上面的例子来:

1
2
3
4
5
6
7
8
9
10
11
12
//ES5写法
function VipUser(name, pass, level) {
User.call(this, name, pass);
this.level = level;
}

VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;

VipUser.prototype.showLevel = function() {
console.log("level: " + this.level);
}

ES5需要通过call方法来将VipUserthis指向User,再添加自己的属性。同样让VipUser的原型指向User,同时让构造器还是指向自己。

1
2
3
4
5
6
7
8
9
10
//ES6写法
class VipUser extends User {
constructor(name, pass, level) {
super(name, pass);
this.level = level;
}
showLevel() {
console.log("level: " + this.level);
}
}

Class继承的特征:

  • 子类extends父类
  • 构造器内,super需要继承父类的属性