JavaScript 中的类

什么是课程？

JavaScript 中的类

公共与私人

访问器方法

最后声明

什么是课程？

类是一个面向对象编程概念，内置于许多面向对象编程语言中。具体来说，类是创建对象、初始化数据和定义函数的蓝图。它是一种以可重用格式组织一类对象信息的方式。通过使用类，程序员可以创建该类的特定实例，并访问特定于类的数据和函数。

举个例子，假设你想创建猫、狗和兔子对象。你可以分别创建每个对象，为每个新对象复制几乎相同的代码，或者你可以创建一个名为“动物”的模板。然后，你只需将特殊信息传递给动物模板即可轻松创建猫、狗和兔子对象。类的概念在于使用模板创建不同但相似的对象，而无需重新编写代码。

JavaScript 中的类

随着 2015 年 ES6 的更新，JavaScript 也获得了类功能。虽然它不像其他面向对象语言那样充实和详细，但它仍然存在。

class在 JavaScript 中，我们使用关键字加上大写类名和一对花括号来声明创建一个新类，如下所示：

class Animal {
}

然而，为了真正使用这个类，我们需要创建一个实例。为此，我们需要创建一个变量，并使用new关键字将其初始化到我们的类中，如下所示：

class Animal {
}

let dog = new Animal();

现在我们有了dog动物类的一个实例。但是……我们到底能用它做什么呢？好吧，每种动物都有哪些特性呢？名字、种类和年龄。为了将这些信息添加到动物类中，我们必须创建一个如下所示的构造函数：

class Animal {
  constructor(name, species, age) {
  this.name = name;
  this.species = species;
  this.age == age;
  }
}

let dog = new Animal("Spot", "Dog", 4);

此构造函数接收初始化类的新实例（即创建 Dog 对象）时提供的信息，并将 Animal 的特定于类的变量（或属性）设置为该实例。让我们使用点符号来访问和记录 Dog 的一些数据。

class Animal {
  constructor(name, species, age) {
  this.name = name;
  this.species = species;
  this.age == age;
  }
}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.name) //returns "Spot"
console.log(dog.species) //returns "Dog"
console.log(dog.age) //returns 4

现在让我们添加一个特定于类的函数，利用我们的类数据来创建特殊消息。

注意：特定于类的函数称为方法，不需要 function 关键字。

class Animal {
  constructor(name, species, age) {
  this.name = name;
  this.species = species;
  this.age == age;
  }

  cutePet() {
  return `Aww, your ${this.species} is so cute!`;
  }

}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.cutePet()); //returns "Aww, your Dog is so cute!"

初始化后，类的实例可以通过点符号访问其方法，就像访问类属性一样。现在我们有了一个包含一些变量和方法的基础类，可以测试类的实际用途了。

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);
let bird = new Animal("Feathers", "Bird", 3);
let cat = new Animal("Mochi", "Cat", 2);

console.log(dog.cutePet()); //returns "Aww, your Dog is so cute!"
console.log(bird.cutePet()); //returns "Aww, your Bird is so cute!"
console.log(cat.cutePet()); //What does this return?

bird我们初始化了一些名为和的新动物类实例，cat如图所示。知道dog.cutePet()和 的bird.cutePet()返回值后，调用会cat.cutePet()返回什么呢？

你猜对了！它会返回"Aww, your Cat is so cute!"。它访问我们在 Animal 类中定义的相同方法，但它使用初始化实例时提供的数据cat。

公共与私人

大多数类都有公共变量和私有变量的概念。公共变量允许程序员直接访问，而私有变量则不允许在类的作用域之外访问。利用这些，程序员可以更好地实现面向对象编程的主要实践之一：封装。

虽然许多面向对象语言都有public和private关键字，但最新版本的 JavaScript 的做法略有不同。JavaScript 类属性默认声明为公共属性，这意味着程序员只需在声明私有属性时指定即可。我们可以在#每个属性声明前面添加 来声明私有类变量。当尝试在类外部访问私有类属性时，JavaScript 将返回[#variableName] out of scope语法错误。查看 MDN 文档中关于私有类属性的说明了解更多信息。

注意：在引入私有类特性之前，JavaScript 程序员通过在属性名称前面添加下划线来模拟私有类变量。添加下划线实际上并没有阻止程序员访问和更改这些变量。它只是让程序员知道要将它们视为私有变量。

访问器方法

JavaScript 提供了一些特殊的内置方法，称为访问器方法，它们使我们能够在访问类的属性时获得更好的数据质量、更简单的语法和更高的安全性。两种常见的访问器是Getters和Setters。

Getter 方法

一种常见的访问方法是getter。getter 方法返回一个值，但允许我们像访问属性一样访问它。为了创建 getter，我们必须确保我们的方法：

• 有一个返回语句
• 使用get关键字
• 没有任何参数

根据这些条件，我们声明一个 getter 方法，如下所示：

class Animal {
  constructor(name, species, age) {...}

  get cutePet() {
  return `Aww, your ${this.species} is so cute!`;
  }

}

虽然看起来不太像，但添加 get 关键字意味着我们现在可以像这样将该方法作为属性访问：

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);

/**
console.log(dog.cutePet()) 
We no longer need these parentheses as it isn't 
a function call anymore.
**/
console.log(dog.cutePet); //returns "Aww, your Dog is so cute!"

Setter 方法

另一种常见的 JavaScript 访问器方法是setter方法。setter 方法遵循与 getter 相同的逻辑。我们不必将给定方法作为函数来调用，而是可以将其作为给定类的属性来访问。为了创建 setter 方法，我们必须确保该方法：

• 使用set关键字
• 有一个参数

让我们在 Animal 类中创建一个新的 setter 方法来改变动物的种类。

class Animal {
  constructor(name, species, age) {...}

  get cutePet() {...}

  set animalName(name) {
    this.name = name;
  }
}

现在我们可以像这样更改我们的狗的名字：

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.name); //returns "Spot"

dog.animalName = "Fuzzy";

console.log(dog.name); //returns "Fuzzy"

如你所见，我们现在可以像访问属性一样访问 animalName 的 setter 方法，并将其设置为某个值。该值会自动作为参数传递给 setter 方法。如果没有使用set关键字，我们就必须像这样调用该函数：

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.name); //returns "Spot"

dog.animalName("Fuzzy");

console.log(dog.name); //returns "Fuzzy"

最后声明

JavaScript 类是强大的工具，有助于创建更优秀、模块化、可复用且更简洁的代码。现在，您就能使用它们了！如果您想进一步了解类以及它们在 JavaScript 中的工作原理，请查看MDN 类文档。