es6 中的 class 新知识

红太狼 2022-05-31 06:07 226阅读 0赞

在 www.codeceo.com/article/easy-javascript-08-class.html 中学习到

ECMAScript 6引入了class关键字以创建JavaScript中的类。现在，你可以使用class属性在JavaScript中创建类。在ECMA 6之前，无论何时使用new运算符调用一个函数，该函数都会返回一个新对象。因此，此函数是作为一个类来使用的，并被称为构造函数。这种调用函数来返回对象的方式也被称为构造函数调用模式。但在ECMAScript 6中，可以使用class关键字创建类。请看下面的代码：

>     class Car {
>     
>         constructor(maker, price) {
>     
>             this.maker = maker;
>     
>             this.price = price;
>     
>         }
>     
>         getInfo() {
>     
>             console.log(this.maker + " costs : " + this.price);
>     
>         }
>     
>     }
> 
>   
>   
>

在上面的代码片段中，你已经使用ECMAScript 6 class关键字创建了一个名为Car的类。你也可以创建一个Car类的对象，如下所示：

>     var car1 = new Car("a", 100);
>     
>     car1.getInfo();
>     
>     var car2 = new Car("b", 150);
>     
>     car2.getInfo();
> 
>   
>   
>

JavaScript类是惯常基于原型的继承的简化语法。它不提供任何新的对象创建或原型继承方式，并且不会在JavaScript中引入任何面向对象或继承的新模型。你也可以说类是创建对象的特殊函数。

类声明和表达

由于JavaScript中的**class属性也是一个函数**，所以也可以使用类声明和类表达式来创建。你可以使用类声明创建一个类，如下所示：

类也可以使用类表达式来创建。你可以创建命名或未命名的类表达式。可以这样创建命名的类表达式，如下所示：

>     var Car = class {
>     
>         constructor(maker, price) {
>     
>             this.maker = maker;
>     
>             this.price = price;
>     
>         }
>     
>         getInfo() {
>     
>             console.log(this.maker + " costs : " + this.price);
>     
>         }
>     
>         toString() {
>     
>             return `${this.maker} costs : ${this.price}`;
>     
>         }
>     
>     }
> 
>   
>   
>

未命名的类表达式可以如下所示地被创建。给类表达式的名称是类主体的本地名称。

>     var Car = class c {
>     
>         constructor(maker, price) {
>     
>             this.maker = maker;
>     
>             this.price = price;
>     
>         }
>     
>         getInfo() {
>     
>             console.log(this.maker + " costs : " + this.price);
>     
>         }
>     
>         toString() {
>     
>             return `${this.maker} costs : ${this.price}`;
>     
>         }
>     
>     }
> 
>   
>   
>

类的提升

如前所述，一个类既可以作为声明又可以作为表达式来创建，但是与函数声明不同，类声明不会被提升到执行上下文的顶部。请看下面的代码：

>     var car1 = new Car("BMW", 10); // Reference Error  console.log(car1.toString());
>     
>     class Car {
>     
>         constructor(maker, price) {
>     
>             this.maker = maker;
>     
>             this.price = price;
>     
>         }
>     
>         getInfo() {
>     
>             console.log(this.maker + " costs : " + this.price);
>     
>         }
>     
>     }
> 
>   
>

上面的代码会**抛出引用错误**（Reference Error），因为你在声明它之前试图访问一个类。因此，我们可以得到函数声明被提升，而类声明不被提升的结论。

类方法

JavaScript类中有三种类型的方法：

*  **构造方法。**
 *  **静态方法。**
 *  **原型方法。**

构造方法

类构**造函数方法**创建初始化对象。**一个类只能有一个构造方法**。如果你尝试创建多个构造函数方法，则JavaScript将引发异常。可以使用关键字constructor 创建构造函数，如下面的代码所示：

>     class Car {
>     
>         constructor(maker, price) {  //构造方法
>     
>             this.maker = maker;
>     
>             this.price = price;
>     
>         }
>     
>     }
> 
>   
> 
> 
>   
> 
> 
> 静态方法  
>

JavaScript类的**静态方法**是用类调用的，而不是用类的特定对象调用的。如果你尝试用类的实例调用它们，则JavaScript将抛出异常。使用**关键字static**可以创建静态方法，如下所示：

>     class Car {
>     
>         static count() {   // 静态方法
>     
>             console.log("I am static method");
>     
>         }
>     
>     }
>     
>     Car.count();  //异常
> 
>   
>

如果你试图用实例调用静态方法，那么JavaScript会抛出异常说明这个函数不存在。另外，请记住，JavaScript类没有静态属性或成员。截至目前，它只支持静态方法。

原型方法

任何使用类实例访问的常规方法都被称为**原型方法**。这些方法可以继承和使用类的对象。

>     class Car {
>     
>         constructor(maker, price) {
>     
>             this.maker = maker;
>     
>             this.price = price;
>     
>         }
>     
>         getInfo() {  //原型方法
>     
>             console.log(this.maker + " costs : " + this.price);
>     
>         }
>     
>     }
>     
>     var car1 = new Car("BMW", 10);
>     
>     car1.getInfo();
> 
>   
>   
>

在上面的代码片段中，getInfo()是Car类的原型方法。正如你所看到的，我们正在使用Car类的实例。由于它是原型方法，所以也可以继承。让我们来探讨为什么这些方法被称为原型方法。首先，考虑下面的代码：

>     class Car {
>     
>         constructor(maker, price) {
>     
>             this.maker = maker;
>     
>             this.price = price;
>     
>         }
>     
>         getInfo() {
>     
>             console.log(this.maker + " costs : " + this.price);
>     
>         }
>     
>     }
>     
>     console.log(typeof (Car)); // function
> 
>   
>   
>

在这个代码片段中，我们输入了一个Car类的类型，也得到了一个函数的输出。正如你所看到的，这个类只是一个函数类型，所以和其他函数一样，它也有一个prototype属性。这些常规的方法是类的原型对象的方法，因此它们被称为原型方法。它们可以通过坚持基于原型的继承而被继承。

除了这三种类型的方法之外，JavaScript也有一些叫getter和setter的东西，你可以自行查找了解。

结论

在这篇文章中，我们简要介绍了ECMAScript 2015中引入的JavaScript类属性。使用class关键字，我们可以创建一个类，但是请记住，这不是引入对象创建或继承的新方法。相反，对于相同的对象和基于原型的继承，这只是一个更简单的语法。