2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
id: 587d7b8b367417b2b2512b53
|
2021-03-14 21:20:39 -06:00
|
|
|
title: 使用 class 语法定义构造函数
|
2018-10-10 18:03:03 -04:00
|
|
|
challengeType: 1
|
2020-08-04 15:13:35 +08:00
|
|
|
forumTopicId: 301212
|
2021-01-13 03:31:00 +01:00
|
|
|
dashedName: use-class-syntax-to-define-a-constructor-function
|
2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --description--
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
ES6 提供了一个新的创建对象的语法,使用关键字 <dfn>class</dfn>。
|
2020-12-16 00:37:30 -07:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
值得注意的是,`class` 只是一个语法糖,它并不像 Java、Python 或者 Ruby 这一类的语言一样,严格履行了面向对象的开发规范。
|
2020-12-16 00:37:30 -07:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
在 ES5 里面,我们通常会定义一个构造函数 `constructor`,然后使用 `new` 关键字来实例化一个对象:
|
2020-08-04 15:13:35 +08:00
|
|
|
|
|
|
|
```js
|
|
|
|
var SpaceShuttle = function(targetPlanet){
|
|
|
|
this.targetPlanet = targetPlanet;
|
|
|
|
}
|
|
|
|
var zeus = new SpaceShuttle('Jupiter');
|
|
|
|
```
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
`class` 语法只是简单地替换了构造函数 `constructor` 的写法:
|
2020-08-04 15:13:35 +08:00
|
|
|
|
|
|
|
```js
|
|
|
|
class SpaceShuttle {
|
|
|
|
constructor(targetPlanet) {
|
|
|
|
this.targetPlanet = targetPlanet;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const zeus = new SpaceShuttle('Jupiter');
|
|
|
|
```
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
应该注意 `class` 关键字声明了一个新的函数,里面添加了一个构造函数。 当用 `new` 创建一个新的对象时,构造函数会被调用。
|
2020-12-16 00:37:30 -07:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
**注意:**首字母大写驼峰命名法 UpperCamelCase 是 ES6 class 命名的惯例,就像上面的 `SpaceShuttle`。
|
|
|
|
|
|
|
|
`constructor` 方法是一个特殊方法,用于创建和初始化 class 创建的对象。 在 JavaScript 算法和数据结构认证的面向对象编程章节里会更深入介绍它。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --instructions--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
使用 `class` 关键词,写一个 `constructor` 来创建 `Vegetable` class。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
`Vegetable` 这个 class 可以创建 vegetable 对象,这个对象拥有一个在 `constructor` 中赋值的 `name` 属性。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --hints--
|
2020-08-04 15:13:35 +08:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
`Vegetable` 应该是一个 `class`,并在其中定义了 `constructor`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
```js
|
|
|
|
assert(
|
|
|
|
typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function'
|
|
|
|
);
|
2018-10-10 18:03:03 -04:00
|
|
|
```
|
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
应使用 `class` 关键字。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
```js
|
|
|
|
assert(code.match(/class/g));
|
|
|
|
```
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
`Vegetable` 可以被实例化。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
```js
|
|
|
|
assert(() => {
|
|
|
|
const a = new Vegetable('apple');
|
|
|
|
return typeof a === 'object';
|
|
|
|
});
|
|
|
|
```
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2021-03-14 21:20:39 -06:00
|
|
|
`carrot.name` 应该返回 `carrot`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
```js
|
2020-12-16 00:37:30 -07:00
|
|
|
assert(carrot.name == 'carrot');
|
2018-10-10 18:03:03 -04:00
|
|
|
```
|
2020-08-04 15:13:35 +08:00
|
|
|
|
2021-01-13 03:31:00 +01:00
|
|
|
# --seed--
|
|
|
|
|
|
|
|
## --seed-contents--
|
|
|
|
|
|
|
|
```js
|
|
|
|
// Only change code below this line
|
|
|
|
|
|
|
|
// Only change code above this line
|
|
|
|
|
|
|
|
const carrot = new Vegetable('carrot');
|
|
|
|
console.log(carrot.name); // Should display 'carrot'
|
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --solutions--
|
|
|
|
|
2021-01-13 03:31:00 +01:00
|
|
|
```js
|
|
|
|
class Vegetable {
|
|
|
|
constructor(name) {
|
|
|
|
this.name = name;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const carrot = new Vegetable('carrot');
|
|
|
|
```
|