ES6中Class的基本用法

有一段时间没有写Class了，突然遇到几个点有不确定了。在这里回顾整理一下。

主要内容

• class是什么
• 如何定义一个class
• class的兼容性

Class是什么

ES6 提供了更接近传统面向对象语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

在ES6没有出来之前， 通过prototype一样可以开心的玩耍。

function F(val){
	// 对象属性
	this.x = val
}
// 对象方法
F.prototype.f1 = function () {
	console.log(this.x)
}
// 实例化对象
var obj = new F()
// 调用对象的方法
obj.f1(1) // 1

现在，可以改成：

class F {
  constructor(val) {
    this.x = val;
  }
  f1() {
  	console.log(this.x)
  }
}

看起来与标准的面向对象的语言更接近一些。

最基本的Class的使用

要掌握最基本的使用方式，只需要知道如下5点：

1. 构造器
2. 对象属性
3. 静态属性
4. 对象方法
5. 静态方法

构造器

要使用class，首先要了解的是构造器。 这样来理解它：

• 它是一函数，它的名字是固定的：constructor
• 在new 实例时，它会被自动调用，并传入实参
• 一个class必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加

class F {
	constructor(..arg) {
		console.log(arg)
	}
}
var obj = new F('a',[1,2,3]) // ["a", [1,2,3]]

对象属性

有两种方式：

• 方式1 写在构造器内部
• 方式2 写在构造器外部

class F {
	// 1. 写在构造器外部
  a = Math.random()
  constructor () {
  // 2.写在构造器外部
    this.b = 2
  }
}

静态属性

相比于成员属性，静态属性是指类特有的属性，不属于某个特定的对象，它只能通过类名来访问。

有两种方式：
方式1：直接以对象的属性格式加在类名上
方式2：写在类中，用static修饰

class F {
    // 方法2：写在类中，用static修饰
	static b = 2
}
// 方法1：直接加在类名上
F.a = 1

成员方法

类的实例所共享

class F {
  f1() {
    return 'hello';
  }
}
var obj = new F(),
    obj1 = new F()
console.log(obj.f1 === obj1.f1) // true
console.log(obj.f1 === F.prototype.f1) // true

静态方法

与静态属性类似，也有两种添加的方式：

1. 方式一： 直接给class添加方法
2. 方式二：写在成员方法前添加一个static修饰

class F {
  // 方式二：写在成员方法前添加一个static修饰
  static f1() {
    console.log('this',this)
  }
}
// 方式一： 直接给class添加方法
F.f2 = function () {
  console.log('this', this)
}
F.f1()
F.f2()

要注意的是：它内部的this不是提向某个对象，而是这个类。

兼容性

注意：在ie中完全不能使用。

参考：caniuse

小结

本文介绍了ES6中Class的基本用法。希望对你有帮助。