ES6 中的 class 是什么？和ES5构造函数差别是什么？

文章目录

• ES6 中的 class 是什么？和ES5构造函数差别是什么？
• • 1.ES6 class
  • 2.ES6 class 和 ES5 函数构造函数函数 (constructor function) 的差別
  • 3.class 的常见方法
  • • 3.1 继承
    • 3.2 static静态方法
    • 3.3 Private fields

ES6 中的 class 是什么？和ES5构造函数差别是什么？

1.ES6 class

ES6 class 的心智模型与 C++ / Java 等传统class-based 语言是一致的class-based 语言是一致的

JavaScript 在 ECMAScript 6 (ES6) 之前并没有 class 的语法，而是会通过函数构造函数创建对象，再通过 new 关键字实例。

在 ES6 时引入了 class 的概念，JavaScript class 使用的语法 class 类似于其他 OOP 语言中的 class，但 JavaScript 的 class 是一种语法糖，本质上和其他程序语言 class 的实践方式不一样，JavaScript 的 class 是通过原型继承来模拟 class 的行为。如下面示例：

class 方法:

classCar{constructor(brand,model){this.brand=brand;this.model=model;}drive(){console.log(`Driving a${this.brand}${this.model}`);}}constmyCar=newCar("Tesla","Model 3");myCar.drive();// Driving a Tesla Model 3

class 方法之前:

functionCar(brand,model){this.brand=brand;this.model=model;}Car.prototype.drive=function(){console.log(`Driving a${this.brand}${this.model}`);};constmyCar=newCar("Tesla","Model 3");myCar.drive();// Driving a Tesla Model 3

ES6 之前，我们会通过函数实现相同功能，而在 ES6 版本中的实现方法，Car class 中的 drive 方法并不是在 class 内部里封装的方法，背后其实是赋值到了 Car 的原型 (prototype) 上而已。

2.ES6 class 和 ES5 函数构造函数函数 (constructor function) 的差別

ES6 class 和 ES5 的构造函数 (constructor function) 主要有数个差別：

1.提升 hosting ：不同于函数声明的构造函数存在提升，但使用 class 声明则是无法再声明前就使用。

varnewClass=newMyClass();// Uncaught ReferenceError: MyClass is not defined is not definedclassMyClass{}

2.new：class 构造函数必须通过 new 调用，否则会抛出错误。而ES5 的构造函数：不用 new 就只是当普通函数执行。

classAnimal{}consta=Animal();// Uncaught TypeError: Class constructor Animal cannot be invoked without 'new'

3.class 的常见方法

3.1 继承

ES6 的 class 继承是通过使用extends关键字实现的。

假设有一个父 class Animal

classAnimal{constructor(name){this.name=name;}eat(){console.log(`${this.name}eat food.`);}speak(){console.log(`${this.name}makes a noise.`);}}

创建一个子 class Dog，继承 Animal class

classDogextendsAnimal{constructor(name){super(name);}speak(){console.log(`${this.name}barks.`);}}

在这个例子中，Dogclass 继承了Animalclass 的所有属性和方法，也可以重写speak方法。接着，使用Dogclass 创建对象：

constdog=newDog("HAHA");dog.eat();// HAHA eat food.dog.speak();// HAHA barks.

3.2 static静态方法

静态方法不能被对象实例继承，只能通过class 本身调用。这意味着，你不能通过对象调用class 方法，而只能通过class 名本身调用。

如果尝试通过对象实例访问静态方法，将抛出一个错误，因为静态方法不能被继承，只能通过class 本身访问。

classMathHelper{staticadd(a,b){returna+b;}}constmath=newMathHelper();// 当试图通过对象实例访问静态方法，将抛出一个错误console.log(math.add(2,3));// Uncaught TypeError: math.add is not a function// 只能通过 class 本身访问console.log(MathHelper.add(2,3));// 5

3.3 Private fields

可以通过使用前缀#来实现class 的私有领域(Private fields)，包括建立私有的属性或是方法，而私有领域只能在class 内部使用，外部无法存取。

如以下程式码，#privateField为私有变数，只能在Example class 中使用，当实例example 尝试直接获取privateField变数时，会报SyntaxError的错误。

classExample{#privateField=100;getPrivateField(){returnthis.#privateField;}}constexample=newExample();console.log(example.getPrivateField());// 100console.log(example.#privateField);// SyntaxError: Private field '#privateField' must be declared in an enclosing class