在本教程中,您将了解 JavaScript Class 类以及如何有效地使用它。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 属性。然后在 Person
的原型上创建 getName
() 函数,该函数可以被各个 Person
的实例共享。
然后,使用 new
运算符创建 Person
类型的实例。因此,john
对象是通过原型继承的 Person
和 Object
的实例。
以下语句使用 instanceof
运算符检查 john
实例是否是 Person
and 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");
Person
的 getName()
称为类的方法。与构造函数一样,您可以使用以下语法调用类的方法:
objectName.methodName(args)
例如:
let name = john.getName();
console.log(name); // "John Doe"
要验证类是一个函数这一事实,可以使用 typeof
运算符来检查 Person
类的类型。
console.log(typeof Person); // function
它按预期返回 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 关键词 class
声明一个类 。声明 class
是原型继承的语法糖,具有额外的增强功能。