JavaScript 类

JavaScript 类是一种创建对象的蓝图或模板。它们封装了数据和用于操作数据的函数。我们可以使用类来创建对象。从类创建一个对象被称为实例化类。在 JavaScript 中，类是基于原型构建的。类是在 ECMAScript 6（ES6）中引入的。

例如，你可以考虑编写代码来表示汽车实体。这段代码可以包含具有汽车属性的类。对于不同类型的汽车，你可以实例化这个类，并根据汽车型号初始化汽车属性。

在 ES6 之前，构造函数被用来定义一个对象的蓝图。你可以像下面这样定义构造函数：

function Car(brand) { // 构造函数
    this.brand = brand; // 属性初始化
}
const carObj = new Car("Audi"); // 创建一个对象

定义 JavaScript 类

类的语法非常类似于构造函数，但它使用 'class' 关键字来定义类。正如我们可以使用函数声明或函数表达式来定义函数一样，类也可以使用类声明或类表达式来定义。

语法

JavaScript 中类定义的语法如下：

// 类声明
class ClassName {
    // 类体
}

// 类表达式
const ClassName = class {
    // 类体
}

在上述语法中，'ClassName' 是类名。

JavaScript 中的类是一种函数，但是你不能像使用普通函数那样使用它。

JavaScript 类的类型

JavaScript 类是一种函数类型。在下面的例子中，我们使用了 'typeof' 运算符来获取类的类型。它返回 'function'，如输出所示。

<!DOCTYPE html>
<html>
<body>
    <p id="output"> 类 Car 的类型是: </p>
    <script>
        class Car {
            // 类体
        }
        document.getElementById("output").innerHTML += typeof Car;
    </script>
</body>
</html>

输出：

类 Car 的类型是: function

构造器() 方法

当你把函数当作对象的蓝图时，你可以在函数体内部初始化对象属性。同样地，你需要在类中使用构造器() 方法来初始化对象属性。

每次你创建一个类的实例时，它会自动调用类的构造器() 方法。

在下面的例子中，我们使用构造器() 方法来创建 Car 类：

class Car {
    constructor(brand) { // 定义构造器
        this.brand = brand;
    }
}

构造器() 方法没有特定的名字，但可以使用 'constructor' 关键字来创建。你可以使用 'this' 关键字在构造函数内初始化类属性。

创建 JavaScript 对象

为了创建一个 JavaScript 类的对象，我们使用 new 操作符后跟类名和一对括号。我们也可以向它传递参数。

让我们创建一个名为 myCar 的对象如下：

const myCar = new Car("Audi");

构造函数内的 'this' 关键字指的是正在执行当前函数的对象。

示例：无参数创建类对象

在下面的例子中，我们定义了 'Car' 类。该类包含构造器并且使用默认值初始化属性。

之后，我们创建了该类的一个实例，你可以在输出中观察到这一点。

<!DOCTYPE html>
<html>
<body>
    <p id="output"> </p>
    <script>
        // 创建 Car 类
        class Car {
            constructor() {
                this.brand = "BMW";
                this.model = "X5";
                this.year = 2019;
            }
        }
        // 实例化 myCar 对象
        const myCar = new Car();
        // 显示属性
        document.getElementById("output").innerHTML = 
          "汽车品牌是 : " + myCar.brand + "<br>"
          + "汽车型号是 : " + myCar.model + "<br>"
          + "汽车年份是 : " + myCar.year + "<br>";
    </script>
</body>
</html>

输出：

汽车品牌是 : BMW
汽车型号是 : X5
汽车年份是 : 2019

如果你想动态初始化类属性，你可以使用带有构造器() 方法的参数。

示例：带参数创建类对象

在下面的例子中，我们定义了 'Car' 类。类的构造器() 方法接受 4 个参数并使用参数值初始化类属性。

在创建 'Car' 类实例时，我们传递了 4 个参数。通过这种方式，你可以动态初始化类属性。

<!DOCTYPE html>
<html>
<body>
    <p id="output"> </p>
    <script>
        class Car {
            constructor(brand, model, price, year) {
                this.brand = brand;
                this.model = model;
                this.price = price;
                this.year = year;
            }
        }
        const carObj = new Car("BMW", "X5", 9800000, 2019);
        document.getElementById("output").innerHTML += 
          "汽车品牌 : " + carObj.brand + "<br>"
          + "汽车型号 : " + carObj.model + "<br>"
          + "汽车价格 : " + carObj.price + "<br>"
          + "汽车年份 : " + carObj.year + "<br>";
    </script>
</body>
</html>

输出：

汽车品牌 : BMW
汽车型号 : X5
汽车价格 : 9800000
汽车年份 : 2019

JavaScript 类的方法

你也可以在类内部定义方法，这些方法可以通过类实例来访问。

语法

遵循以下语法在类内部定义方法：

class car {
    methodName(params) {
        // 方法体
    }
}
obj.methodName();

在上述语法中，'methodName' 是方法的动态名字。定义类方法时，你不需要在方法名前写诸如 'function' 的关键字。

为了调用类方法，你需要使用类的实例。在这里，'obj' 是类的一个实例。你也可以向方法传递参数。

示例

下面的例子演示了如何向类方法传递参数。

这里，我们定义了 updateprice() 方法来更新汽车的价格。因此，在调用 updateprice() 方法时，我们传入新的价格作为参数，并在方法体内使用它来更新价格。

你可以在输出中看到汽车的原始价格和更新后的价格。

<!DOCTYPE html>
<html>
<body>
    <p id="output"> </p>
    <script>
        class Car {
            constructor(brand, model, price, year) {
                this.brand = brand;
                this.model = model;
                this.price = price;
                this.year = year;
            }

            updateprice(newPrice) {
                this.price = newPrice;
            }
        }
        const myCar = new Car("BMW", "X5", 9800000, 2019);
        document.getElementById("output").innerHTML += 
          "汽车的价格是 : " + myCar.price + "<br>";
        myCar.updateprice(8800000); // 更新价格
        document.getElementById("output").innerHTML += 
          "更新后的汽车价格是 : " + myCar.price + "<br>";
    </script>
</body>
</html>

输出：

汽车的价格是 : 9800000
更新后的汽车价格是 : 8800000

JavaScript 类的提升

在 JavaScript 中，类的声明不会被提升到代码的顶部。所以，你总是在使用它之前定义类。

const carObj = new Car(); // 这会产生错误。
class Car {
}

你可以尝试运行上述代码。由于在初始化之前使用了类 Car，它会产生一个引用错误。

类与严格模式

严格模式用于避免一些异常错误。类代码默认总是在严格模式下运行。

让我们通过下面的例子来理解这一点。

class numbers {
    constructor() {
        num = 90; // 在没有使用 var 关键字的情况下定义变量
    }
}
const numObj = new numbers();

在上述代码中，我们在构造器() 方法内定义了一个全局变量 'num'。在 JavaScript 的严格模式下，不允许在没有使用 var, let 或 const 关键字的情况下定义变量。因此，上述代码将会抛出一个错误。