JavaScript物件的建構子和new運算子（實例詳解）

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於物件的建構子和new操作符，建構函式是所有物件的成員方法中，最早被調用的那個，下面一起來看看吧，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

23.JavaScript物件的建構函式和運算子new

一、前言

前文講到的物件建立方法都是直接使用let obj = { ...}語法，具體方法如下：

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

這樣的物件建立方法雖然簡單又直接，但是物件的程式碼無法重複使用，在建立許多類似物件時，程式碼量會很高。

此時，就需要使用建構函數，和new運算子實作相似物件的建構。

二、建構子

如果學過其他物件導向語言的童鞋對建構方法應該都不陌生，尤其是學習C 的童鞋應該印象會非常深刻。

建構函數概念和用途

在其他物件導向的語言中，建構函數通常是這樣定義的：

##建構函數是一個特殊的成員函數，名字與類別名稱相同，在創建類別類型物件時由編譯器自動調用，保證每個資料成員都有一個合適的初始值，並且在物件的生命週期內只調用一次。

我們可以簡單的理解為，建構子是所有物件的成員方法中，最早被呼叫的那個。常用於初始化物件的狀態，例如人的名字、火車的節數等。

和建構子對應的是

析構函式，析構函式是所有物件的成員方法中，最後被呼叫的那個，常常是物件失去存在價值，用來回收對象資源。

物件的生命週期

一個物件從建立到回收，總共可以分割為3個階段，如下圖：

其中，物件建立階段的主要工作由建構函式完成，包括物件的初始化，關係的連接等。執行階段主要是物件功能的調用，用於配合整個專案的執行，通常由普通函數（物件的成員函數）完成。銷毀階段由析構函數接手，用於清除物件佔用的記憶體空間，防止記憶體洩漏的發生。

JavaScript建構子

比起其他物件導向語言，

JavaScript物件的建構子比較特殊，它可以是任何一個普通的函數，而且無需在物件中定義。只有兩個約定：

建構子的命名通常以大寫開頭；
1. 建構子智慧由
2. new運算子執行;

例如：

function People(name){
    this.name = name;}

以上程式碼中的

People函式就可以當作建構函式使用，同時它也是一個普通的函式。物件的this指標章節，我們介紹過，如果一個普通函數中使用this，this的內容取決於呼叫它的物件（obj .func()），如果不使用物件呼叫函數，那麼this在非嚴格模式下就是Window，嚴格模式下就是undefined。

通常情況下，直接呼叫建構函式會得到不正確的結果，如果我們希望把函式當作建構函式調用，就需要使用一個新的關鍵字

new。

以下程式碼使用

new關鍵字建立了兩個People物件：

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

以下是程式碼的執行結果：

三、new 關鍵字

當使用

new呼叫一個函數時，這個函數就會變成建構函數，此時，引擎就會執行以下動作：

建立一個新的空物件
1. { }，並把空物件賦值給this;
#執行建構函數體，通常會透過
2. this建構物件的內部結構；
傳回
3. this的值；

你沒有看錯，使用

new呼叫函數後，函數是有傳回值的，即使定義函數時沒有return語句。

程式碼

new People('xiaoming')所做的事情大概類似以下程式碼：

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

所以使用

new呼叫建構子後，得到的是一個由建構函數塑造過的物件。

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

例如：

let xiaoming = new People('xiaoming');let xiaohong = new People('xiaohong');let mingming = new People('mingming');

想象一下，如果对象的代码有上百行，这么做是不是比{...}方式要简便很多呢？这就是面向对象中的代码服用，可以极大程度上降低代码量，提高开发速度。

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

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

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

强调:

从技术上讲，任何函数（除了箭头函数，它没有自己的 this）都可以用作构造器。即可以通过 new 来运行，它会执行上面的算法。“首字母大写”是一个共同的约定，以明确表示一个函数将被使用 new 来运行。

四、匿名构造函数

如果我们只希望对象被创建一次，那么就可以简化构造函数的定义，使用new直接调用匿名函数，创建一个对象：

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

代码的执行结果如下：

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

五、构造函数的返回值

常规情况下，构造函数不需要使用return语句，它的唯一用途就是把对象的属性写入this，然后直接默认返回this对象就好了。

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

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

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

举个栗子：

function People(name){
    this.name = name;
	return {name:'Nobody'};}console.log(new People('xiaoming').name);

代码执行结果如下：

可以看出，name为’xiaoming’的对象没有被返回，而是Nobody对象代替了xiaoming。

如果使用return返回一个基础类型，案例如下：

function Dog(){
    this.name = 'hashiqi';
	return 666;}console.log(new Dog().name);

代码执行结果如下：

可见，在返回基础类型时，return语句是不生效的。

强调：

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

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

在构造函数中不仅可以添加对象的属性，由于JavaScript的函数同样可以赋值给变量，我们还可以用构造函数初始化对象的成员方法。

例如，我们可以给People对象增加一个sing方法：

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

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

结语

截止到目前，我们介绍的对象都只是以JavaScript的一个特殊数据类型（数据结构）角度出发的，实际上，在面向对象领域，类才是绝对的主角。

我们会在后文逐步深入介绍JavaScript的各种特性，包括面向对象知识，类、继承等。

总结

本文主要介绍了JavaScript对象的构造方法和new关键字，需要掌握并注意的点包括：

1. 建構函數是一個常規函數，但是有一些首字母大寫的約定；
2. 箭頭函數由於沒有this，因此不能作為建構子；
3. 建構函數需要使用new關鍵字調用，並傳回一個物件；
4. 當建構函式本身擁有返回語句時，引擎會做特殊處理；

#【相關推薦：javascript影片教學、web前端】

以上是JavaScript物件的建構子和new運算子（實例詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！