面向?qū)ο缶幊蹋∣bject Oriented Programming，縮寫為 OOP）是目前主流的編程范式。

那么，“對(duì)象”（object）到底是什么？

對(duì)象是單個(gè)實(shí)物的抽象。
對(duì)象是一個(gè)容器，封裝了屬性（property）和方法（method）。 屬性是對(duì)象的狀態(tài)，方法是對(duì)象的行為（完成某種任務(wù)）。

2. 構(gòu)造函數(shù)

面向?qū)ο缶幊痰牡谝徊?，就是要生成?duì)象。通常需要一個(gè)模板，表示某一類實(shí)物的共同特征，然后對(duì)象根據(jù)這個(gè)模板生成。

JavaScript 語言使用構(gòu)造函數(shù)（constructor）作為對(duì)象的模板。 “構(gòu)造函數(shù)”，就是專門用來生成實(shí)例對(duì)象的函數(shù)。

它就是對(duì)象的模板，描述實(shí)例對(duì)象的基本結(jié)構(gòu)。一個(gè)構(gòu)造函數(shù)，可以生成多個(gè)實(shí)例對(duì)象，這些實(shí)例對(duì)象都有相同的結(jié)構(gòu)。

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

上面代碼中， Vehicle 就是構(gòu)造函數(shù)。為了與普通函數(shù)區(qū)別，構(gòu)造函數(shù)名字的第一個(gè)字母通常大寫。

構(gòu)造函數(shù)的特點(diǎn)有兩個(gè)。

this
new

3. new 命令

3.1 基本用法

3.1.1 new 的基本用法

new 命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個(gè)實(shí)例對(duì)象。

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

上面代碼通過 new 命令，讓構(gòu)造函數(shù) Vehicle 生成一個(gè)實(shí)例對(duì)象，保存在變量 v 中。 new 命令執(zhí)行時(shí)，構(gòu)造函數(shù)內(nèi)部的 this ，就代表了新生成的實(shí)例對(duì)象， this.price 表示實(shí)例對(duì)象有一個(gè) price 屬性，值是1000。

下面兩行代碼是等價(jià)的，但是為了表示這里是函數(shù)調(diào)用， 推薦使用括號(hào) 。

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

3.1.2 保證構(gòu)造函數(shù)必須與 new 命令一起使用

如果忘了使用 new 命令，直接調(diào)用構(gòu)造函數(shù)會(huì)發(fā)生什么事？

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

上面代碼中，調(diào)用 Vehicle 構(gòu)造函數(shù)時(shí)，忘了加上 new 命令。結(jié)果，變量 v 變成了 undefined ，而 price 屬性變成了全局變量。因此，應(yīng)該非常小心，避免不使用 new 命令、直接調(diào)用構(gòu)造函數(shù)。

為了保證構(gòu)造函數(shù)必須與 new 命令一起使用，有2種解決辦法：

構(gòu)造函數(shù)內(nèi)部使用嚴(yán)格模式，即第一行加上 use strict 。 這樣的話，一旦忘了使用 new 命令，直接調(diào)用構(gòu)造函數(shù)就會(huì)報(bào)錯(cuò)。

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

上面代碼的 Fubar 為構(gòu)造函數(shù)， use strict 命令保證了該函數(shù)在嚴(yán)格模式下運(yùn)行。由于嚴(yán)格模式中，函數(shù)內(nèi)部的 this 不能指向全局對(duì)象，默認(rèn)等于 undefined ，導(dǎo)致不加 new 調(diào)用會(huì)報(bào)錯(cuò)（JavaScript 不允許對(duì) undefined 添加屬性）。

構(gòu)造函數(shù)內(nèi)部判斷是否使用 new 命令，如果發(fā)現(xiàn)沒有使用，則直接返回一個(gè)實(shí)例對(duì)象。

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 命令時(shí)，它后面的函數(shù)依次執(zhí)行下面的步驟。

prototype
this

也就是說，構(gòu)造函數(shù)內(nèi)部， this 指的是一個(gè)新生成的空對(duì)象，所有針對(duì) this 的操作，都會(huì)發(fā)生在這個(gè)空對(duì)象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”，就是說這個(gè)函數(shù)的目的，就是操作一個(gè)空對(duì)象（即 this 對(duì)象），將其“構(gòu)造”為需要的樣子。

3.2.1 關(guān)于 return 語句

如果構(gòu)造函數(shù)內(nèi)部有 return 語句，而且 return 后面跟著一個(gè)對(duì)象， new 命令會(huì)返回 return 語句指定的對(duì)象；否則，就會(huì)不管 return 語句，返回 this 對(duì)象。

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

如果 return 語句返回的是一個(gè)跟 this 無關(guān)的新對(duì)象， new 命令會(huì)返回這個(gè)新對(duì)象，而不是 this 對(duì)象。

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

3.2.2 對(duì)普通函數(shù)使用 new

如果對(duì)普通函數(shù)（內(nèi)部沒有 this 關(guān)鍵字的函數(shù)）使用 new 命令，則會(huì) 返回一個(gè)空對(duì)象 。

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

這是因?yàn)?new 命令總是返回一個(gè)對(duì)象，要么是實(shí)例對(duì)象，要么是 return 語句指定的對(duì)象。本例中， return 語句返回的是字符串，所以 new 命令就忽略了該語句。

最新評(píng)論