23.JavaScript对象的构造函数和操作符new

23.JavaScript对象的构造函数和操作符new

一、前言

前文讲到的对象创建方法都是直接使用

let obj = {...}

语法，具体方法如下：

let user ={
    name:'xiaoming',...}

这样的对象创建方法虽然简单又直接，但是对象的代码无法重用，在创建很多类似对象时，代码量会很高。

此时，就需要使用构造函数，和

new

操作符实现相似对象的构建。

二、构造函数

如果学习过其他面向对象语言的童鞋对构造方法应该都不陌生，尤其是学习

C++

的童鞋应该印象会非常深刻。

构造函数概念和用途

在其他面向对象的语言中，构造函数通常是这样定义的：

构造函数是一个特殊的成员函数，名字与类名相同，创建类类型对象时由编译器自动调用，保证每个数据成员都有一个合适的初始值，并且在对象的生命周期内只调用一次。

我们可以简单的理解为，构造函数是所有对象的成员方法中，最早被调用的那个。常用于初始化对象的状态，例如人的名字、火车的节数等。

和构造函数对应的是析构函数，析构函数是所有对象的成员方法中，最后被调用的那个，常常是对象失去存在价值，用于回收对象资源。

对象的生命周期

一个对象从创建到回收，总共可以划分为3个阶段，如下图：

其中，对象创建阶段的主要工作由构造函数完成，包括对象的初始化，关系的连接等。执行阶段主要是对象功能的调用，用于配合整个项目的执行，通常由普通函数（对象的成员函数）完成。销毁阶段由析构函数接手，用于清除对象占用的内存空间，防止内存泄漏的发生。

JavaScript构造函数

相比于其他面向对象语言，

JavaScript

对象的构造函数比较特殊，它可以是任何一个普通的函数，而且无需在对象中定义。只有两个约定：

1. 构造函数的命名通常以大写开头；
2. 构造函数智能由new操作符执行；

例如：

functionPeople(name){this.name = name;}

以上代码中的

People

函数就可以当作构造函数使用，同时它也是一个普通的函数。对象的

this

指针章节，我们介绍过，如果一个普通函数中使用

this

，

this

的内容取决于调用它的对象（

obj.func()

），如果不使用对象调用函数，那么

this

在非严格模式下就是

Window

，严格模式下就是

undefined

。

通常情况下，直接调用构造函数会得到不正确的结果，如果我们希望把函数当作构造函数调用，就需要使用一个新的关键字

new

。

以下代码使用

new

关键字创建了两个

People

对象：

let xiaoming =newPeople('xiaoming');let xiaohong =newPeople('xiaohong');
console.log(xiaoming.name);
console.log(xiaohong.name);

以下是代码的执行结果：

三、new 关键字

当使用

new

调用一个函数时，这个函数就会变成构造函数，此时，引擎就会执行以下动作：

1. 创建一个新的空对象{ }，并把空对象赋值给this；
2. 执行构造函数体，通常会通过this构造对象的内部结构；
3. 返回this的值；

你没有看错，使用

new

调用函数后，函数是有返回值的，即使在定义函数时没有

return

语句。

代码

new People('xiaoming')

所做的事情大概类似以下代码：

functionPeople(name){this={};//隐式的创建一个空对象this.name = name;returnthis;//把创建的对象返回}

所以使用

new

调用构造函数后，得到的是一个由构造函数塑造过的对象。

使用

new

关键字的好处是，我们可以书写一次构造函数代码，然后在任意的地方创建类似的对象。

例如：

let xiaoming =newPeople('xiaoming');let xiaohong =newPeople('xiaohong');let mingming =newPeople('mingming');

想象一下，如果对象的代码有上百行，这么做是不是比

{...}

方式要简便很多呢？这就是面向对象中的代码服用，可以极大程度上降低代码量，提高开发速度。

如果构造函数没有参数，我们可以省略调用时的括号：

let xiaoming =newPeople;//类似于这样let xiaoming =newPeople();//等价于这样

但是个人推荐不要使用这种特性，仅仅是告知在规范中存在这种语法。

强调:

从技术上讲，任何函数（除了箭头函数，它没有自己的

this

）都可以用作构造器。即可以通过

new

来运行，它会执行上面的算法。“首字母大写”是一个共同的约定，以明确表示一个函数将被使用

new

来运行。

四、匿名构造函数

如果我们只希望对象被创建一次，那么就可以简化构造函数的定义，使用

new

直接调用匿名函数，创建一个对象：

let xiaoming =newfunction(){this.name ='xiaoming';}
console.log(xiaoming.name);

代码的执行结果如下：

使用匿名函数当作构造函数的结果和常规构造函数没有任何区别，唯一的区别是匿名构造函数不能重复调用（因为没有名字）。这种使用方法常用在无需复用代码的场景中。

五、构造函数的返回值

常规情况下，构造函数不需要使用

return

语句，它的唯一用途就是把对象的属性写入

this

，然后直接默认返回

this

对象就好了。

但是，由于

JavaScript

对构造函数几乎没有任何约束，如果我们在一个普通函数中写了返回语句，会发生什么呢？引擎会做下面两个选择：

1. 如果return返回的是一个对象，就返回这个对象，不再返回this；
2. 如果return返回的是一个基础类型，则忽略返回语句，继续返回this；

从引擎的处理方式中不难看出，构造函数的主要任务就是创建对象，处理并返回，如果使用构造函数返回一个基础类型，是没有意义的。

举个栗子：

functionPeople(name){this.name = name;return{name:'Nobody'};}
console.log(newPeople('xiaoming').name);

代码执行结果如下：

可以看出，

name

为’xiaoming’的对象没有被返回，而是

Nobody

对象代替了

xiaoming

。

如果使用

return

返回一个基础类型，案例如下：

functionDog(){this.name ='hashiqi';return666;}
console.log(newDog().name);

代码执行结果如下：

可见，在返回基础类型时，

return

语句是不生效的。

强调：

通常对象的构造函数没有返回值，我们也没有必要利用引擎对构造函数返回值的特殊处理，编写特别的构造函数。

六、利用构造函数为对象添加方法

在构造函数中不仅可以添加对象的属性，由于

JavaScript

的函数同样可以赋值给变量，我们还可以用构造函数初始化对象的成员方法。

例如，我们可以给

People

对象增加一个

sing

方法：

functionPeople(name){this.name = name;this.sing=function(){
        console.log(`${name} is a happy boy.`);}}let xiaoming =newPeople('xiaoming');
xiaoming.sing();

以上代码在构造函数中为对象添加了一个方法，代码执行结果如下：

结语

截止到目前，我们介绍的对象都只是以

JavaScript

的一个特殊数据类型（数据结构）角度出发的，实际上，在面向对象领域，类才是绝对的主角。

我们会在后文逐步深入介绍

JavaScript

的各种特性，包括面向对象知识，类、继承等。

总结

本文主要介绍了

JavaScript

对象的构造方法和

new

关键字，需要掌握并注意的点包括：

1. 构造函数是一个常规函数，但是有一些首字母大写的约定；
2. 箭头函数由于没有this，因此不能作为构造函数；
3. 构造函数需要使用new关键字调用，并返回一个对象；
4. 当构造函数本身拥有返回语句时，引擎会做特殊处理；