掌握构造函数：打破面向对象编程难题（二）-阿里云开发者社区

掌握构造函数：打破面向对象编程难题（一）https://developer.aliyun.com/article/1426393

着重介绍构造函数的默认参数和可选参数

在 JavaScript 中，构造函数可以通过以下两种方式来设置默认参数和可选参数：使用短路运算符或使用默认函数参数语法。

使用短路运算符

使用短路运算符，可以以一种简单的方式为构造函数设置默认参数和可选参数。例如，假设我们有以下 Person 构造函数：

function Person(name, age) {
  this.name = name || 'Unknown';
  this.age = age || 0;
}

在这个例子中，我们使用短路运算符 || 来为构造函数设置默认参数值。如果 name 或 age 为 falsey 值（例如 undefined、 null、0、空字符串等），则短路运算符返回 ‘Unknown’ 或 0，进而为参数设置默认值。

现在，我们可以通过如下方式创建 Person 对象：

let john = new Person('John', 30);
let jane = new Person();

这将创建一个 john 对象，它的 name 为 ‘John’， age 为 30，同时也将创建一个 jane 对象，它的 name 为 ‘Unknown’，age 为 0。

使用默认函数参数语法

ECMAScript 6 引入了函数默认参数语法，该语法也可用于构造函数。例如，我们可以使用默认函数参数语法来为 Person 构造函数设置默认参数值：

function Person(name = 'Unknown', age = 0) {
  this.name = name;
  this.age = age;
}

现在，我们可以通过如下方式创建 Person 对象：

let john = new Person('John', 30);
let jane = new Person();

这仍然会创建一个 john 对象，它的 name 为 ‘John’， age 为 30，同时也将创建一个 jane 对象，它的 name 为 ‘Unknown’，age 为 0。

注意，使用默认参数语法时，构造函数参数的默认值不仅仅限于原始值。也可以根据需要使用对象、数组和函数等数据类型。

总的来说，通过使用短路运算符或默认函数参数语法，可以轻松设置构造函数的默认参数和可选参数，并提高构造函数的灵活性和重用性。

IV. this 关键字

解释 this 关键字的作用

在 JavaScript 中， this 关键字指向当前执行代码的对象。这通常是当前函数所属的对象。当我们在构造函数内使用 this 关键字时，它引用的就是该构造函数创建的对象实例本身。

例如，假设我们有以下的 Person 构造函数：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

在这个构造函数中，我们使用 this 来设置对象实例的 name 和 age 属性。在创建新的对象实例时，通过 new 关键字对构造函数进行调用，以生成对该函数的新引用。这种方式将 this 绑定到新生成的对象实例上，并使我们可以使用点符号访问对象实例的属性和方法。

例如，使用上面的例子，我们可以这样创建对象实例：

let john = new Person('John', 30);

在这个例子中， this.name 将被设置为 ‘John’， this.age 将被设置为 30。通过使用 new 关键字，我们还可以访问新 Person 对象实例的 name 和 age 属性：

console.log(john.name); // 输出 "John"
console.log(john.age); // 输出 30

此外，this 关键字还可以用于访问当前执行代码的上下文。在全局上下文中，this 引用全局对象（在浏览器中是 window 对象，在 Node.js 中是 global 对象）。在函数内部，this 引用调用该函数的对象。

总之，this 关键字在 JavaScript 中是一个很重要的概念，它使得我们能够在构造函数和其他函数内部访问对象实例，并且在函数中引用调用函数的上下文。

为什么在构造函数中使用 this 关键字是必要的

在构造函数中使用 this 关键字是必要的，因为它允许我们引用新创建的对象实例。在创建对象实例时，使用构造函数可以初始化该实例，并将该实例的属性和方法绑定到它自己上面。

如果没有使用 this 关键字，我们就无法引用新创建的对象实例，并且无法在实例上绑定属性和方法，这意味着我们将失去使用构造函数的优势。

例如，在上面的例子中，我们使用 this 关键字来设置对象实例的属性。如果没有使用 this，我们将无法在构造函数中引用新创建的对象实例，并设置该实例的属性和方法：

function Person(name, age) {
  name = name; // ERROR：这是常规的局部变量赋值，不会将名称和年龄绑定到对象实例上
  age = age; // ERROR：这是常规的局部变量赋值，不会将名称和年龄绑定到对象实例上
}

在这个例子中，我们使用了常规的变量赋值，而不是 this 关键字，这意味着我们无法将传递给构造函数的参数与新创建的对象实例绑定。当我们创建新的 Person 对象时，这些属性将不会在新对象中可见。

因此，使用 this 关键字的目的是绑定对象实例到构造函数中，并将实例属性和方法绑定到该实例上。这是使用构造函数创建 JavaScript 对象的基础，而没有使用 this 是无法完成这项工作的。

演示如何在构造函数中正确使用 this 关键字

当创建构造函数时，正确使用 this 关键字非常重要。

以下是一个示例，演示了使用 this 来初始化对象实例的方法：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let john = new Person('John', 30);
console.log(john.name); // 输出 "John"
console.log(john.age); // 输出 30

在这个示例中，我们定义了一个 Person 构造函数，并在其中使用 this 来设置对象实例的 name 和 age 属性。当我们通过 new Person('John', 30) 创建新的 Person 对象实例时，this 关键字将指向该新创建的对象实例。这允许我们将对象实例的属性绑定到该实例上。

在 john 对象实例中，this.name 被设置为 ‘John’，this.age 被设置为 30。我们可以通过使用点符号 . 访问这些属性来验证对象实例的属性是否正确地被绑定到该对象实例上。

在这个例子中，正确使用 this 关键字非常关键，因为它使我们能够将对象实例属性绑定到新创建的对象实例上。如果没有使用 this，我们无法访问新创建的对象实例，从而无法将对象实例属性绑定到对象实例上。

V. 使用构造函数创建对象

介绍如何使用构造函数来创建对象

在 JavaScript 中，可以使用构造函数来创建对象。构造函数是一个特殊的函数，当使用 new 关键字创建新对象实例时，该函数将被调用，并用于初始化新对象实例的属性和方法。

以下是使用构造函数创建对象的基本步骤：

1. 创建一个构造函数

构造函数可以是普通函数，但遵循特定的命名约定，即函数名以大写字母开头。例如，Person 是一个有效的构造函数名：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

在这个例子中，我们定义了一个 Person 构造函数，该构造函数具有 name 和 age 属性。

2. 实例化对象

使用 new 关键字创建新的对象实例。在这个例子中，我们使用 new Person('John', 30) 来创建新的 Person 对象实例：

let john = new Person('John', 30);

在这个例子中，我们传递 ‘John’ 和 30 作为参数，这些参数将在 Person 构造函数中被使用。

3. 访问对象属性和方法

创建对象实例后，我们可以使用点符号 . 来访问对象属性和方法。例如，在上面的例子中，我们可以访问 john 对象实例的 name 和 age 属性：

console.log(john.name); // 输出 "John"
console.log(john.age); // 输出 30

这使我们能够访问和使用 Person 对象实例的属性和方法。

总的来说，通过使用 new 关键字和构造函数，我们可以轻松地创建和初始化 JavaScript 对象实例。使用构造函数创建对象的核心在于构造函数本身，它定义了对象的属性和方法，并在实例化对象时被调用。

演示一个简单的例子，展示如何通过构造函数创建一个对象并访问其中的属性和方法

下面是一个简单的例子，展示了如何通过构造函数创建一个对象，以及如何访问该对象中的属性和方法：

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.start = function() {
    console.log(`${this.make} ${this.model} starts.`);
  };
  this.stop = function() {
    console.log(`${this.make} ${this.model} stops.`);
  };
}
let honda = new Car('Honda', 'Civic', 2022);
console.log(honda.make); // 输出 "Honda"
console.log(honda.model); // 输出 "Civic"
console.log(honda.year); // 输出 2022
honda.start(); // 输出 "Honda Civic starts."
honda.stop(); // 输出 "Honda Civic stops."

在这个例子中，我们定义了一个 Car 构造函数，该构造函数具有 make、model 和 year 属性，以及 start 和 stop 方法。使用 new 关键字，我们实例化了一个新的 Car 对象，传递 ‘Honda’、‘Civic’ 和 2022 作为参数。当我们通过 honda 对象实例访问 make、model 和 year 属性时，它们将返回我们在实例化对象时指定的值。

我们还可以通过 honda.start() 和 honda.stop() 方法调用对象实例的 start 和 stop 方法。这些方法使用 this 关键字引用当前对象实例的属性。

总的来说，这个例子演示了如何使用构造函数创建对象，并展示了如何访问和使用对象实例的属性和方法。

VI. 总结

简述构造函数的重要性和实用性

构造函数是 JavaScript 中的一个重要概念，它允许我们创建并初始化具有特定属性和方法的对象。

构造函数的重要性和实用性如下：

1. 可以创建多个实例

使用构造函数，我们可以轻松地创建多个具有相同属性和方法的对象实例。这意味着我们可以重复使用相同的代码，并创建多个对象，而不必为每个对象重复编写相同的代码。

2. 初始化对象属性

通过构造函数，我们可以设置对象实例的属性并对其进行初始化。这意味着我们可以通过构造函数确保每个对象实例都具有相同的属性值，从而保持代码的一致性和可维护性。

3. 可以使用继承

使用构造函数，我们可以使用 JavaScript 中的原型链继承模型来扩展对象的功能。这意味着我们可以定义一个基本构造函数，并扩展其功能以创建其他类型的对象。

4. 可以避免全局变量

使用构造函数，我们可以避免使用全局变量，从而减少代码中的命名冲突和不必要的复杂性。对象实例通过局部变量进行维护，这使得代码更加清晰和可理解。

总之，构造函数是 JavaScript 编程的基础概念之一，是创建和实例化对象的关键。它们为代码提供了结构，简化了对多个对象实例进行维护的任务，并为程序员提供了一种有效的方式来创建和初始化对象。

在编写面向对象的代码时考虑使用构造函数

在编写面向对象的代码时，使用构造函数是一种优雅的方式来创建和初始化对象实例。这种方法可以帮助我们组织代码，并将对象实例的属性和方法放在一起，以便更轻松地管理和维护代码。

以下是一些要考虑使用构造函数的情况：

当需要创建多个相似的对象实例时，可以使用构造函数来减少代码量并提高代码可维护性。
当需要初始化对象实例的属性值时，可以使用构造函数来设置这些属性。这有助于确保每个对象实例具有相同的属性值，从而提高代码的一致性和可读性。
当需要使用继承扩展对象时，可以使用构造函数作为基类，并为其添加子类或新的对象类型。这可以帮助我们复用代码，并将一些共同的功能提取出来。
当需要避免使用全局变量时，可以使用构造函数来创建对象实例。这有助于减少命名冲突和复杂性，并使代码更加模块化和易于维护。

总之，使用构造函数是一种有效的方式来创建和初始化对象实例，它可以帮助我们组织代码，并提高代码的可读性、可维护性和可重用性。因此，在编写面向对象的代码时考虑使用构造函数是非常值得的。

掌握构造函数：打破面向对象编程难题（二）