【ES6 教程】第四章 ES6类01—语法以及如何声明一个类
在今天的教程中,我们将了解 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()))
输出:
John Doe
这个怎么运行的。
首先,将 Person 创建为具有名为 name 的属性名称的构造函数。getName() 函数被分配给原型,以便它可以被 Person 类型的所有实例共享。
然后,使用 new 运算符创建 Person 类型的新实例。因此,john 对象是通过原型继承的 Person 和 Object 的一个实例。
以下语句使用 instanceof 运算符来检查 john 是否是 Person 和 Object 类型的实例:
console.log(john instanceof Person); // true
console.log(john instanceof Object); // true
ES6 类声明
ES6 引入了一种用于声明类的新语法,如下例所示:
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
这个 Person 类的行为类似于前面示例中的 Person 类型。但是,它不使用构造函数/原型模式,而是使用 class 关键字。
在 Person 类中,constructor() 是我们可以初始化实例属性的地方。当我们实例化类的对象时,JavaScript 会自动调用 constructor() 方法。
下面创建一个新的 Person 对象,它会自动调用 Person 类的 constructor():
let john = new Person("John Doe");
getName() 被称为 Person 类的方法。与构造函数一样,我们可以使用以下语法调用类的方法:
objectName.methodName(args)
例如:
let name = john.getName();
console.log(name); // "John Doe"
要验证类是特殊函数这一事实,我们可以使用 typeof 运算符来检查 Person 类的类型。
console.log(typeof Person); // function
它按预期返回功能。
john 对象也是 Person 和 Object 类型的一个实例:
console.log(john instanceof Person); // true
console.log(john instanceof Object); // true
类与自定义类型
尽管类和通过构造函数定义的自定义类型有相似之处,但还是有一些重要的区别。
首先,类声明不像函数声明那样被提升。
例如,如果将以下代码放在 Person 类声明部分的上方,则会收到 ReferenceError。
let john = new Person("John Doe");
错误:
Uncaught ReferenceError: Person is not defined
其次,一个类中的所有代码都自动在严格模式下执行。我们不能改变这种行为。
第三,类方法是不可枚举的。如果我们使用构造函数/原型模式,则必须使用 Object.defineProperty() 方法使属性不可枚举。
最后,在没有 new 运算符的情况下调用类构造函数将导致错误,如下例所示。
let john = Person("John Doe");
错误:
Uncaught TypeError: Class constructor Person cannot be invoked without 'new'
请注意,可以在没有 new 运算符的情况下调用构造函数。在这种情况下,构造函数的行为类似于常规函数。
总结
使用 JavaScript 类关键字声明一个新类。
类声明是原型继承的语法糖,具有额外的增强功能。
推荐阅读
学习更多技能
请点击下方公众号