JavaScript 类与对象创建

背景

类是JavaScript中相对较新的概念，因为在此之前，JavaScript仅依靠原型链来实现继承。JavaScript的类建立在原型继承的基础上，使整个机制变得更加直观清晰。JavaScript中的类本质上是对原型链的语法糖。本课程中你不需要理解原型链或原型继承的概念，但了解这些概念有助于更好地理解类在语言中的作用。

什么是类？

类是一种独立的小程序，拥有自己的上下文——包含方法（函数）和属性（变量）。它们以计算机能够理解的方式描述一个实体。可以创建类的不同“实例”（称为对象），并将这些实例当作变量来使用。让我们通过下面的代码来学习JavaScript中类的工作方式。

1class Developer {
2  constructor(firstname, lastname) {
3    this.firstname = firstname;
4    this.lastname = lastname;
5  }
6
7  getName() {
8    return `${this.firstname} ${this.lastname}`;
9  }
10}
11
12var me = new Developer('Robin', 'Wieruch');
13
14console.log(me.getName());

类的对象创建与初始化类变量

本例中描述的实体是“开发者”。可以通过 new 关键字创建新对象，并在第12行同时调用类的构造函数，为类的属性（即 firstname 和 lastname）赋值。me 实例的 firstname 被赋值为 'Robin'，lastname 被赋值为 'Wieruch'。

此外，还可以使用各种类方法（如 getName()）来读取或修改对象的属性。console.log() 方法会将传入的参数打印到控制台。

这就是你需要理解React类组件的全部内容。在React中，使用JavaScript类来定义组件，但正如你在下一课中将看到的，React组件之所以成为React组件，是因为它继承了从 React 包导入的 React.Component 类的所有能力。

编程挑战：创建一个JavaScript类

在下面的编程挑战中，请编写一个JavaScript类，用于描述一辆汽车，包含属性 color（颜色）、model（型号）、engineCap（发动机排量）和 registrationNum（车牌号），以及方法 getColor()、getModel()、setColor() 和 setModel()。请务必使用此处给出的完全相同的拼写，否则你的代码将无法通过测试。

1// 在这里写下你的代码

JavaScript中的对象创建

如前所述，类在JavaScript中是相对较新的概念。对象与类非常相似。请看下面的代码示例。我们定义了三个对象：computer、computer2 和 computer3。每个对象都有属性 brand（品牌）、RAM 和 clockspeed（时钟频率）。此外，computer3 还包含一个方法 printRam()。注意，对象可以像 computer 那样写在一行，也可以像另外两个那样跨多行书写。

1let computer = { brand : 'HP', RAM : '8 GB', clockspeed : "2 GHz"};
2
3// 对象定义可以包含空格和换行！
4let computer2 = { 
5  brand : 'HP',
6  RAM : '8 GB',
7  clockspeed : "2 GHz"
8};
9
10// 对象也可以包含“函数”，称为方法
11let computer3 = {
12  brand : 'HP',
13  RAM : '8 GB',
14  clockspeed : "2 GHz",
15  
16  printRam() {
17    console.log(this.RAM)
18  }
19}

你可能已经注意到，在类声明中使用了关键字 this，我们将在下一课中深入学习它。