跳到主要内容

JavaScript 类

提示
  1. 类作为对象蓝图：JavaScript的ES6版本引入了类，作为对象的蓝图，可以基于类创建多个对象。
  2. 创建和使用类：使用class关键字创建类，并通过构造器constructor定义属性。类方法可直接在类内定义，无需使用function关键字。
  3. 额外特性：JavaScript类支持使用get和set关键字定义的获取和设置方法，且类的代码自动遵守严格模式（'use strict'）。类不会被提升，需要先定义后使用。

类是JavaScript ES6 版本引入的一项特性。

类是对象的蓝图。您可以从类创建一个对象。

可以将类视为房屋的草图（原型）。它包含了关于楼层、门、窗等的所有细节。基于这些描述，您建造房子。房子是对象。

因为可以根据同一描述建造许多房子，我们可以从一个类创建许多对象。

创建JavaScript类​

JavaScript类类似于 JavaScript构造函数，实际上只是一种语法糖。

构造函数定义如下：

// 构造函数
function Person() {
  (this.name = "John"), (this.age = 23);
}

// 创建一个对象
const person1 = new Person();

使用类创建JS类时，您使用class关键字而不是function关键字。例如，

// 创建一个类
class Person {
  constructor(name) {
    this.name = name;
  }
}

class关键字用于创建类。属性在构造函数中被分配。

现在您可以创建一个对象。例如，

// 创建一个类
class Person {
  constructor(name) {
    this.name = name;
  }
}

// 创建一个对象
const person1 = new Person("John");
const person2 = new Person("Jack");

console.log(person1.name); // John
console.log(person2.name); // Jack

这里，person1 和 person2 是Person类的对象。

注意：类中的constructor()方法在每次创建对象时会自动调用。

Javascript 类方法​

使用构造函数时，您定义方法如下：

// 构造函数
function Person(name) {
  // 将参数值分配给调用对象
  this.name = name;

  // 定义方法
  this.greet = function () {
    return "Hello" + " " + this.name;
  };
}

在JavaScript类中定义方法很简单。您只需给出方法名称，后跟() 。例如，

class Person {
  constructor(name) {
    this.name = name;
  }

  // 定义方法
  greet() {
    console.log(`Hello ${this.name}`);
  }
}

let person1 = new Person("John");

// 访问属性
console.log(person1.name); // John

// 访问方法
person1.greet(); // Hello John

注意：要访问对象的方法，您需要使用其名称后跟() 来调用该方法。

Getters 和 Setters​

在JavaScript中，getter方法用于获取对象的值，setter方法用于设置对象的值。

JavaScript类可以包含 getters 和 setters。您使用get关键字来定义getter方法，使用set来定义setter方法。例如，

class Person {
  constructor(name) {
    this.name = name;
  }

  // getter
  get personName() {
    return this.name;
  }

  // setter
  set personName(x) {
    this.name = x;
  }
}

let person1 = new Person("Jack");
console.log(person1.name); // Jack

// 更改name属性的值
person1.personName = "Sarah";
console.log(person1.name); // Sarah

提升（Hoisting）​

在使用之前应该定义类。与函数和其他JavaScript声明不同，类不会提升。例如，

// 访问类
const p = new Person(); // ReferenceError

// 定义类
class Person {
  constructor(name) {
    this.name = name;
  }
}

如您所见，定义之前访问类会抛出错误。

'use strict'​

类总是遵循'use-strict'。类中的所有代码自动处于严格模式。例如，

class Person {
  constructor() {
    a = 0;
    this.name = a;
  }
}

let p = new Person(); // ReferenceError: Can't find variable: a

注意：JavaScript类是一种特殊类型的函数。typeof运算符对于类返回function。

例如，

class Person {}
console.log(typeof Person); // function
最后于 更新