JavaScript 类基础：ES6 类简介

摘要: 在本教程中，您将了解 JavaScript 类以及如何有效地使用它。

JavaScript 类是创建对象的蓝图。类封装了数据和操作数据的函数。

与 Java 和 C# 等其他编程语言不同，JavaScript 类是对原型继承的语法糖。换句话说，ES6 类只是特殊的函数。

ES6 之前的类回顾

在 ES6 之前，JavaScript 没有类的概念。要模拟一个类，您通常使用构造函数/原型模式，如下例所示

function Person(name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
};

var john = new Person("John Doe");
console.log(john.getName());Code language: JavaScript (javascript)

输出

John Doe

它是如何工作的。

首先，创建一个名为 Person 的构造函数，它有一个名为 name 的属性。getName() 函数被分配给 prototype，以便它可以被所有 Person 类型实例共享。

然后，使用 new 运算符创建 Person 类型的新的实例。因此，john 对象是 Person 和 Object 的实例，通过原型继承。

以下语句使用 instanceof 运算符检查 john 是否是 Person 和 Object 类型的实例

console.log(john instanceof Person); // true
console.log(john instanceof Object); // trueCode language: JavaScript (javascript)

ES6 类声明

ES6 引入了一种新的语法来声明一个类，如本例所示

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}Code language: JavaScript (javascript)

此 Person 类与之前示例中的 Person 类型类似。但是，它使用 class 关键字而不是构造函数/原型模式。

在 Person 类中，constructor() 是您可以在其中初始化实例属性的地方。当您实例化一个类的对象时，JavaScript 会自动调用 constructor() 方法。

以下创建一个新的 Person 对象，它将自动调用 Person 类的 constructor()

let john = new Person("John Doe");Code language: JavaScript (javascript)

getName() 被称为 Person 类的方法。与构造函数一样，您可以使用以下语法调用类的方法

objectName.methodName(args)Code language: CSS (css)

例如

let name = john.getName();
console.log(name); // "John Doe"Code language: JavaScript (javascript)

为了验证类是特殊函数的事实，您可以使用 typeof 运算符来检查 Person 类的类型。

console.log(typeof Person); // functionCode language: JavaScript (javascript)

它将按预期返回 function。

john 对象也是 Person 和 Object 类型的实例

console.log(john instanceof Person); // true
console.log(john instanceof Object); // trueCode language: JavaScript (javascript)

类与自定义类型

尽管类和通过构造函数定义的自定义类型之间存在相似之处，但它们之间也存在一些重要的区别。

首先，类声明不像函数声明那样是提升的。

例如，如果将以下代码放在 Person 类声明部分之上，您将收到 ReferenceError。

let john = new Person("John Doe");Code language: JavaScript (javascript)

错误

Uncaught ReferenceError: Person is not definedCode language: JavaScript (javascript)

其次，类内部的所有代码都会自动在严格模式下执行。您无法更改此行为。

第三，类方法是不可枚举的。如果您使用构造函数/原型模式，则必须使用 Object.defineProperty() 方法使属性不可枚举。

最后，在没有 new 运算符的情况下调用类构造函数会导致错误，如下例所示。

let john = Person("John Doe");Code language: JavaScript (javascript)

错误

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'Code language: JavaScript (javascript)

请注意，可以在没有 new 运算符的情况下调用构造函数。在这种情况下，构造函数就像一个普通函数。

总结

使用 JavaScript class 关键字来声明一个新类。
class 声明是对原型继承的语法糖，并具有额外的增强功能。

本教程对您有帮助吗？