如何在JavaScript項目中使用new 命令

這篇文章將為大家詳細講解有關如何在JavaScript項目中使用new 命令，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

面向對象編程（Object Oriented Programming，縮寫為 OOP）是目前主流的編程范式。

那么，“對象”（object）到底是什么？

對象是單個實物的抽象。
對象是一個容器，封裝了屬性（property）和方法（method）。 屬性是對象的狀態，方法是對象的行為（完成某種任務）。

2. 構造函數

面向對象編程的第一步，就是要生成對象。通常需要一個模板，表示某一類實物的共同特征，然后對象根據這個模板生成。

JavaScript 語言使用構造函數（constructor）作為對象的模板。 “構造函數”，就是專門用來生成實例對象的函數。

它就是對象的模板，描述實例對象的基本結構。一個構造函數，可以生成多個實例對象，這些實例對象都有相同的結構。

var Vehicle = function () {
 this.price = 1000;
};

上面代碼中， Vehicle 就是構造函數。為了與普通函數區別，構造函數名字的第一個字母通常大寫。

構造函數的特點有兩個。

this
new

3. new 命令

3.1 基本用法

3.1.1 new 的基本用法

new 命令的作用，就是執行構造函數，返回一個實例對象。

var Vehicle = function () {
 this.price = 1000;
};
var v = new Vehicle();
v.price // 1000

上面代碼通過 new 命令，讓構造函數 Vehicle 生成一個實例對象，保存在變量 v 中。 new 命令執行時，構造函數內部的 this ，就代表了新生成的實例對象， this.price 表示實例對象有一個 price 屬性，值是1000。

下面兩行代碼是等價的，但是為了表示這里是函數調用， 推薦使用括號 。

// 推薦的寫法
var v = new Vehicle();
// 不推薦的寫法
var v = new Vehicle;

3.1.2 保證構造函數必須與 new 命令一起使用

如果忘了使用 new 命令，直接調用構造函數會發生什么事？

var Vehicle = function (){
 this.price = 1000;
};
var v = Vehicle();
v // undefined
price // 1000

上面代碼中，調用 Vehicle 構造函數時，忘了加上 new 命令。結果，變量 v 變成了 undefined ，而 price 屬性變成了全局變量。因此，應該非常小心，避免不使用 new 命令、直接調用構造函數。

為了保證構造函數必須與 new 命令一起使用，有2種解決辦法：

構造函數內部使用嚴格模式，即第一行加上 use strict 。 這樣的話，一旦忘了使用 new 命令，直接調用構造函數就會報錯。

function Fubar(foo, bar){
 'use strict';
 this._foo = foo;
 this._bar = bar;
}
Fubar()
// TypeError: Cannot set property '_foo' of undefined

上面代碼的 Fubar 為構造函數， use strict 命令保證了該函數在嚴格模式下運行。由于嚴格模式中，函數內部的 this 不能指向全局對象，默認等于 undefined ，導致不加 new 調用會報錯（JavaScript 不允許對 undefined 添加屬性）。

構造函數內部判斷是否使用 new 命令，如果發現沒有使用，則直接返回一個實例對象。

function Fubar(foo, bar) {
 if (!(this instanceof Fubar)) {
  return new Fubar(foo, bar);
 }
 this._foo = foo;
 this._bar = bar;
}
Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1

3.2 new 命令的原理

使用 new 命令時，它后面的函數依次執行下面的步驟。

prototype
this

也就是說，構造函數內部， this 指的是一個新生成的空對象，所有針對 this 的操作，都會發生在這個空對象上。構造函數之所以叫“構造函數”，就是說這個函數的目的，就是操作一個空對象（即 this 對象），將其“構造”為需要的樣子。

3.2.1 關于 return 語句

如果構造函數內部有 return 語句，而且 return 后面跟著一個對象， new 命令會返回 return 語句指定的對象；否則，就會不管 return 語句，返回 this 對象。

var Vehicle = function () {
 this.price = 1000;
 return 1000;
};
(new Vehicle()) === 1000
// false  new命令忽略了這個 return 語句，返回“構造”后的 this 對象。

如果 return 語句返回的是一個跟 this 無關的新對象， new 命令會返回這個新對象，而不是 this 對象。

var Vehicle = function (){
 this.price = 1000;
 return { price: 2000 };
};
(new Vehicle()).price
// 2000  new 命令返回這個對象，而不是 this 對象。

3.2.2 對普通函數使用 new

如果對普通函數（內部沒有 this 關鍵字的函數）使用 new 命令，則會 返回一個空對象 。

function getMessage() {
 return 'this is a message';
}
var msg = new getMessage();
msg // {}
typeof msg // "object"

這是因為 new 命令總是返回一個對象，要么是實例對象，要么是 return 語句指定的對象。本例中， return 語句返回的是字符串，所以 new 命令就忽略了該語句。

關于如何在JavaScript項目中使用new 命令就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。