ES6 Class 3a0c0a225a534984aabe9a943c5df975

ES6 Class

status: Draft tags: JavaScript Created time: April 23, 2023 10:52 PM

类

本质

ECMAScript标准中规定的类本质上的JavaScript构造函数的语法糖。

class Application {}

console.log(typeof Application);
// functionction
console.log(Object.getOwnPropertyNames(app.__proto__));
// [ 'constructor' ]

实例化

实例化的过程中constructor会自动执行。并且类一定要被new实例化，如果直接调用，那么将会报错。

class Application {}
Application();
// TypeError: Class constructor Application cannot be invoked without 'new'

实例属性

声明实例属性

在类中定义实例属性有两种方法：

在constructor中通过this.的形式声明
直接在类中声明

class Application {
  // 第一种写法
	name = "张三";

	constructor() {
    // 第二种写法
		this.age = 18;
	}
}

getter和setter

在类中可以像在对象中那样定义setter和getter函数。

class Application {
	_name = "张三";

	get name() {
		return this._name;
	}

	set name(val) {
		this._name = val;
	}
}

const app = new Application();
console.log(app.name);
// 张三
app.name = 123;
console.log(app.name, app._name);
// 123 123

属性表达式

类的属性名可以用表达式

class Application {
  constructor(length) {
    // ...
  }

  [methodName]() {
    // ...
  }
}

原型方法

在类中声明原型方法跟在对象中使用ES6简写方式声明方法类似

class Application {
	getName() {}
}

这样声明的函数实际上最终会被挂载到实例的原型对象上，作为原型方法。

class Application {
	_name = "张三";

	getName() {}
}

const app = new Application();

console.log(Object.getOwnPropertyNames(app.__proto__));
// [ 'constructor', 'getName' ]