深入理解JavaScript系列（26）：设计模式之构造函

深入理解JavaScript系列（二十六）：设计模式之构造函数模式详解

你是否对JavaScript中的构造函数模式有所疑惑？这篇文章将为你详细解读其基本概念、用法以及与原型的关联。对于那些对构造函数模式感兴趣的朋友，我诚挚地推荐你们继续阅读下去。

一、基本用法

在JavaScript中，构造函数是一种特殊类型的函数，主要用于创建特定类型的对象实例。通过new关键字调用，可以告诉JavaScript你想要创建一个新的对象实例，并且这个新对象的成员是由构造函数定义的。在构造函数内部，this关键字引用的是新创建的对象。例如：

```javascript

function Car(model, year, miles) {

this.model = model;

this.year = year;

this.miles = miles;

this.output = function() {

return this.model + "已经行驶了" + this.miles + "公里";

};

}

```

二、构造函数与原型

上述示例中的构造函数有一个小问题：每次创建新的Car对象时，都会重新创建一个新的output方法，导致内存浪费。为了解决这个问题，我们可以利用JavaScript中的原型链机制。在JavaScript中，每个函数都有一个原型属性prototype。当使用构造函数创建对象时，该对象的原型链上就可以访问到构造函数的原型属性上的方法和属性。这样，多个Car对象实例可以共享同一个原型上的output方法。例如：

```javascript

function Car(model, year, miles) {

this.model = model;

this.year = year;

this.miles = miles;

}

Car.prototype.output = function() {

return this.model + "已经行驶了" + this.miles + "公里";

};

```

三、是否只能用new？

汽车模型的奇妙旅程：构造函数与输出功能

让我们以一段简单的JavaScript代码开启这段旅程。设想一个名为Car的构造函数，它接受三个参数：模型、年份和里程数。这个构造函数不仅为我们提供了存储车辆信息的方式，还带有自定义的输出功能。

代码示例如下：

```javascript

function Car(model, year, miles) {

this.model = model; // 设置车辆模型

this.year = year; // 记录车辆的年份

this.miles = miles; // 记录车辆的行驶里程数

// 定义输出函数，用于展示车辆信息

this.output = function () {

return this.model + "已经行驶了" + this.miles + "公里"; // 输出车辆行驶信息

}

}

```

现在，我们可以通过两种方式来使用这个函数：作为函数调用或使用对象的作用域调用。让我们逐一这两种方式。

作为函数调用：如果我们直接使用函数名进行调用，而不使用`new`关键字，此时的`this`会指向全局对象（在浏览器环境中通常是`window`对象）。示例代码如下：

```javascript

Car("大叔", 2009, 20000); // 将Car函数添加到window对象上，可以通过window.output()访问输出功能

console.log(window.output()); // 输出："大叔已经行驶了20000公里"

```

虽然创建了一个Car的实例，但并没有显式地将其赋值给任何变量，所以无法通过常规方式访问该实例的属性或方法。但输出的信息仍然正确，因为输出功能被添加到了全局对象上。这种方式不太符合面向对象编程的常规做法，因此推荐使用`new`关键字来创建对象实例。使用`new`关键字后，我们就可以像操作普通对象一样操作创建的实例了。验证代码如下：

```javascript

var tom = new Car("大叔", 2009, 20000); // 使用new关键字创建Car实例并将其赋值给变量tom

console.log(typeof tom); // 输出："object"

console.log(tom.output()); // 输出："大叔已经行驶了20000公里" 可以直接通过实例访问输出功能。

```

在实际开发中，为了确保代码的健壮性和可维护性，有时我们需要强制使用`new`关键字来创建构造函数实例。我们可以通过修改构造函数来实现这一点。修改后的代码如下：

```javascript

function Car(model, year, miles) {

if (!(this instanceof Car)) { // 如果不使用new关键字调用构造函数，则强制使用new重新创建一个实例

return new Car(model, year, miles);

}

this.model = model; // 继续设置其他属性与方法 后续代码保持一致 ...

} 接下来验证新构造函数的用法： var tom = new Car("大叔", 2009, 20000); var dudu = Car("Dudu", 2010, 5000); 控制台输出结果符合预期： console.log(typeof tom); // 输出："object"，表示创建了一个实例对象 console.log(tom.output()); // 输出："大叔已经行驶了2000公里"，可以正常使用输出功能 console.log(typeof dudu); // 输出："object"，不使用new关键字时强制创建的新实例 console.log(dudu.output()); // 输出："Dudu已经行驶了5公里"，同样可以正常使用输出功能 通过这种方式，我们确保了无论是否使用new关键字调用构造函数，都能得到正确的实例对象并可以使用其属性和方法。这种设计提高了代码的健壮性和可维护性。现在我们可以放心地通过创建不同的汽车实例来更多关于汽车模型的奇妙旅程了！原始包装函数与构造函数的

在JavaScript的编程世界中，原始包装函数如同神秘的工匠，它们将普通的数据类型雕琢成特定的形式。这些原始包装函数包括Number、String和Boolean。它们看似简单，实则内涵丰富，使用得当，将为你的代码增添不少光彩。

让我们先来看看如何使用这些原始包装函数。以下是一段示例代码：

使用原始包装函数的方式如下：

```javascript

// 使用原始包装函数创建实例

var s = new String("my string");

var n = new Number(101);

var b = new Boolean(true);

```

在实际开发中，我们更推荐使用直接赋值的方式，如：

```javascript

var s = "my string";

var n = 101;

var b = true;

```

这种方式更加简洁明了。那么，什么时候应该使用原始包装函数呢？答案是在你想保留数值的状态时。例如，如果你需要为数值添加一些额外的属性或方法，那么原始包装函数就派上了用场。

接下来，让我们一下String类型的原始包装函数。看下面的例子：

```javascript

// 创建一个字符串实例

var greet = new String("Hello there");

// 使用split()方法分割字符串

greet.split(' ')[0]; // 输出 "Hello"

// 为字符串实例添加新属性

greet.smile = true;

// 能够正常访问新属性

console.log(typeof greet.smile); // 输出 "boolean"

```

通过上面的例子，我们可以看到，使用原始包装函数创建的实例可以添加额外的属性，并且可以正常访问这些属性。这是一个重要的特性，因为在某些情况下，我们可能需要为数据类型添加额外的信息或功能。然而需要注意的是，对于原始类型（如直接使用字符串字面量创建的字符串），我们无法为其添加额外的属性。这是因为在JavaScript中，原始类型是不可变的。

本章主要讲解了构造函数模式的使用方法、调用方法以及new关键字的区别。希望这些内容能够帮助你在实际开发中更好地运用这些知识。在编写代码时，要注意选择合适的用法，使代码既简洁又高效。至于更多深入的知识，你可以参考狼蚁网站的SEO优化代码以及ECMAScript的相关章节进行进一步学习。不要忘记参考其他优秀的编程资源，如cambrian.render('body')所提供的指导和实践经验分享。让我们一起在编程的道路上不断前行，更多未知的领域！