2.9.2 类的构造函数-Vue.js从入门到精通(一)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(一)

### 2.9.2 类的构造函数

在Vue.js的开发旅程中，虽然Vue.js本身是基于原型继承的JavaScript框架，不直接依赖于ES6类（Class）语法来构建组件，但理解JavaScript中的类及其构造函数对于深入JavaScript以及Vue.js的生态系统，尤其是当涉及到高级模式如Vuex、Vue Router或编写可复用的Vue插件时，显得尤为重要。本章节将深入探讨JavaScript中的类与构造函数，为你在Vue.js项目中的进阶应用打下坚实基础。

#### 2.9.2.1 类的基本概念

在ES6之前，JavaScript主要通过函数和原型链来实现面向对象的编程特性。ES6引入了`class`关键字，使得JavaScript的面向对象编程更加直观和易于理解。`class`语法是一种语法糖，背后仍然是基于原型的继承机制。

一个类定义了一个对象的模板或蓝图，它包含了一系列属性和方法。这些属性和方法可以被类的实例（即对象）所共享。

```javascript
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('Alice', 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 30 years old.
```

在上述示例中，`Person`是一个类，它有一个`constructor`方法（构造函数）和两个实例方法（`greet`）。构造函数是一个特殊的方法，当创建类的实例时，它会自动被调用，用于初始化新创建的对象。

#### 2.9.2.2 构造函数详解

构造函数是类定义中不可或缺的一部分，它负责在对象被创建时初始化对象的属性。每个类只能有一个构造函数，且名称必须为`constructor`。

**1. 构造函数的基本用法**

构造函数的主要任务是接收参数并基于这些参数设置对象的属性。在构造函数内部，你可以使用`this`关键字来引用新创建的对象实例。

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

describe() {
    return `${this.name} is a ${this.species}.`;
  }
}

const dog = new Animal('Buddy', 'Dog');
console.log(dog.describe()); // 输出: Buddy is a Dog.
```

**2. 构造函数中的默认参数和参数解构**

与普通函数一样，构造函数也支持默认参数和参数解构，这可以使构造函数更加灵活和易于使用。

```javascript
class User {
  constructor({ name = 'Anonymous', age = 0, role = 'user' } = {}) {
    this.name = name;
    this.age = age;
    this.role = role;
  }
}

const user1 = new User({ name: 'John', age: 35 });
console.log(user1.name); // 输出: John
console.log(user1.age); // 输出: 35
console.log(user1.role); // 输出: user（默认值）

const user2 = new User();
console.log(user2.name); // 输出: Anonymous（默认值）
```

**3. 构造函数中的`new.target`**

`new.target`是构造函数内部的一个特殊属性，它返回当前函数是否是被`new`操作符调用的。如果函数不是通过`new`操作符调用的，`new.target`的值为`undefined`。这个特性可以用于在构造函数内部判断当前函数是否应该被实例化。

```javascript
function MyClass() {
  if (new.target !== undefined) {
    console.log('被 new 调用');
  } else {
    console.log('没有被 new 调用');
  }
}

new MyClass(); // 输出: 被 new 调用
MyClass(); // 输出: 没有被 new 调用
```

虽然这个例子没有直接使用`class`语法，但`new.target`同样适用于类的构造函数中。

#### 2.9.2.3 构造函数与Vue.js的关联

虽然Vue.js的组件并不是直接使用类来定义的（Vue 3中的Composition API提供了更接近函数式编程的方式，但Vue 2及之前的版本主要通过选项对象来定义组件），但理解类的构造函数对于理解Vue组件的初始化过程非常有帮助。

在Vue组件中，虽然我们不直接编写构造函数，但Vue实例化的过程与类的构造函数类似。当我们使用`Vue.extend()`来创建Vue组件时，或者通过`new Vue()`来创建Vue实例时，Vue内部会执行一系列的初始化操作，这些操作类似于在构造函数中设置属性。

例如，Vue实例化的过程中会处理`data`、`methods`、`computed`等选项，并将它们绑定到Vue实例上，这些操作与在类的构造函数中初始化对象的属性类似。

```javascript
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});
```

在上面的Vue实例中，虽然我们没有直接编写构造函数，但Vue内部会处理`data`和`methods`等选项，并将它们绑定到Vue实例上，类似于在类的构造函数中初始化对象的属性。

#### 2.9.2.4 结论

尽管Vue.js本身不直接依赖于ES6的类语法来构建组件，但理解类的构造函数对于深入JavaScript及Vue.js的生态系统至关重要。它帮助我们更好地理解对象的初始化过程，以及在Vue.js项目中如何有效地管理和利用对象的状态和行为。通过掌握类的构造函数，我们可以更加灵活地编写可复用的代码，并在Vue.js项目中实现更加复杂的逻辑和交互。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(三)

VUE组件基础与实战

Vue面试指南

移动端开发指南

vue项目构建基础入门与实战

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(二)

TypeScript和Vue从入门到精通(五)

Vue.js从入门到精通(四)

Vue.js从入门到精通(二)

Vue3技术解密

Vue源码完全解析