一 對(duì)象的概念

“面向?qū)ο缶幊獭保∣bject Oriented Programming这敬，縮寫為OOP）是目前主流的編程范式。它的核心思想是將真實(shí)世界中各種復(fù)雜的關(guān)系媳叨，抽象為一個(gè)個(gè)對(duì)象腥光，然后由對(duì)象之間的分工與合作关顷，完成對(duì)真實(shí)世界的模擬。

傳統(tǒng)的過程式編程（procedural programming）由一系列函數(shù)或一系列指令組成武福，而面向?qū)ο缶幊痰某绦蛴梢幌盗袑?duì)象組成议双。每一個(gè)對(duì)象都是功能中心，具有明確分工捉片，可以完成接受信息平痰、處理數(shù)據(jù)、發(fā)出信息等任務(wù)伍纫。因此宗雇，面向?qū)ο缶幊叹哂徐`活性、代碼的可重用性莹规、模塊性等特點(diǎn)赔蒲，容易維護(hù)和開發(fā)，非常適合多人合作的大型軟件項(xiàng)目良漱。

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

我們從兩個(gè)層次來理解债热。

（1）“對(duì)象”是單個(gè)實(shí)物的抽象砾嫉。

一本書、一輛汽車窒篱、一個(gè)人都可以是“對(duì)象”焕刮，一個(gè)數(shù)據(jù)庫、一張網(wǎng)頁墙杯、一個(gè)與遠(yuǎn)程服務(wù)器的連接也可以是“對(duì)象”配并。當(dāng)實(shí)物被抽象成“對(duì)象”，實(shí)物之間的關(guān)系就變成了“對(duì)象”之間的關(guān)系高镐，從而就可以模擬現(xiàn)實(shí)情況溉旋，針對(duì)“對(duì)象”進(jìn)行編程。

（2）“對(duì)象”是一個(gè)容器嫉髓，封裝了“屬性”（property）和“方法”（method）观腊。

所謂“屬性”，就是對(duì)象的狀態(tài)算行；所謂“方法”梧油，就是對(duì)象的行為（完成某種任務(wù)）。比如州邢，我們可以把動(dòng)物抽象為animal對(duì)象儡陨，“屬性”記錄具體是那一種動(dòng)物，“方法”表示動(dòng)物的某種行為（奔跑、捕獵骗村、休息等等）嫌褪。

二 構(gòu)造函數(shù)

“面向?qū)ο缶幊獭钡牡谝徊剑褪且伞皩?duì)象”胚股。

前面說過渔扎，“對(duì)象”是單個(gè)實(shí)物的抽象。通常需要一個(gè)模板信轿，表示某一類實(shí)物的共同特征晃痴，然后“對(duì)象”根據(jù)這個(gè)模板生成。

典型的面向?qū)ο缶幊陶Z言（比如 C++ 和 Java）财忽，存在“類”（class）這個(gè)概念倘核。所謂“類”就是對(duì)象的模板，對(duì)象就是“類”的實(shí)例即彪。但是紧唱，JavaScript語言的對(duì)象體系，不是基于“類”的隶校，而是基于構(gòu)造函數(shù)（constructor）和原型鏈（prototype）漏益。

JavaScript語言使用構(gòu)造函數(shù)（constructor）作為對(duì)象的模板。所謂“構(gòu)造函數(shù)”深胳，就是專門用來生成“對(duì)象”的函數(shù)绰疤。它提供模板，描述對(duì)象的基本結(jié)構(gòu)舞终。一個(gè)構(gòu)造函數(shù)轻庆，可以生成多個(gè)對(duì)象，這些對(duì)象都有相同的結(jié)構(gòu)敛劝。

構(gòu)造函數(shù)的寫法就是一個(gè)普通的函數(shù)余爆，但是有自己的特征和用法。

var Vehicle=function(){

this.price=1000;

};

上面代碼中夸盟，Vehicle就是構(gòu)造函數(shù)蛾方，它提供模板，用來生成對(duì)象實(shí)例上陕。為了與普通函數(shù)區(qū)別桩砰，構(gòu)造函數(shù)名字的第一個(gè)字母通常大寫。

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

三 new 命令

基本用法

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

varVehicle=function(){this.price=1000;};varv=newVehicle();v.price// 1000

上面代碼通過new命令，讓構(gòu)造函數(shù)Vehicle生成一個(gè)實(shí)例對(duì)象，保存在變量v中渐尿。這個(gè)新生成的實(shí)例對(duì)象醉途，從構(gòu)造函數(shù)Vehicle繼承了price屬性。在new命令執(zhí)行時(shí)砖茸，構(gòu)造函數(shù)內(nèi)部的this隘擎，就代表了新生成的實(shí)例對(duì)象，this.price表示實(shí)例對(duì)象有一個(gè)price屬性凉夯，它的值是1000货葬。

使用new命令時(shí)，根據(jù)需要劲够，構(gòu)造函數(shù)也可以接受參數(shù)震桶。

varVehicle=function(p){this.price=p;};varv=newVehicle(500);

new命令本身就可以執(zhí)行構(gòu)造函數(shù)，所以后面的構(gòu)造函數(shù)可以帶括號(hào)征绎，也可以不帶括號(hào)蹲姐。下面兩行代碼是等價(jià)的。

varv=newVehicle();varv=newVehicle;

一個(gè)很自然的問題是人柿，如果忘了使用new命令柴墩，直接調(diào)用構(gòu)造函數(shù)會(huì)發(fā)生什么事？

這種情況下凫岖，構(gòu)造函數(shù)就變成了普通函數(shù)江咳，并不會(huì)生成實(shí)例對(duì)象。而且由于后面會(huì)說到的原因哥放，this這時(shí)代表全局對(duì)象扎阶，將造成一些意想不到的結(jié)果。

varVehicle=function(){this.price=1000;};varv=Vehicle();v.price// Uncaught TypeError: Cannot read property 'price' of undefinedprice// 1000

上面代碼中婶芭，調(diào)用Vehicle構(gòu)造函數(shù)時(shí)东臀，忘了加上new命令。結(jié)果犀农，price屬性變成了全局變量惰赋，而變量v變成了undefined。

因此呵哨，應(yīng)該非常小心赁濒，避免出現(xiàn)不使用new命令、直接調(diào)用構(gòu)造函數(shù)的情況孟害。為了保證構(gòu)造函數(shù)必須與new命令一起使用拒炎，一個(gè)解決辦法是，在構(gòu)造函數(shù)內(nèi)部使用嚴(yán)格模式挨务，即第一行加上use strict击你。

functionFubar(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è)解決辦法石景，是在構(gòu)造函數(shù)內(nèi)部判斷是否使用new命令，如果發(fā)現(xiàn)沒有使用拙吉，則直接返回一個(gè)實(shí)例對(duì)象潮孽。

functionFubar(foo,bar){if(!(thisinstanceofFubar)){returnnewFubar(foo,bar);}this._foo=foo;this._bar=bar;}Fubar(1,2)._foo// 1(newFubar(1,2))._foo// 1

上面代碼中的構(gòu)造函數(shù)，不管加不加new命令筷黔，都會(huì)得到同樣的結(jié)果往史。

new命令的原理

使用new命令時(shí)，它后面的函數(shù)調(diào)用就不是正常的調(diào)用必逆，而是依次執(zhí)行下面的步驟怠堪。

創(chuàng)建一個(gè)空對(duì)象，作為將要返回的對(duì)象實(shí)例

將這個(gè)空對(duì)象的原型名眉，指向構(gòu)造函數(shù)的prototype屬性

將這個(gè)空對(duì)象賦值給函數(shù)內(nèi)部的this關(guān)鍵字

開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼

也就是說粟矿，構(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)造”為需要的樣子荆姆。

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

varVehicle=function(){this.price=1000;return1000;};(newVehicle())===1000// false

上面代碼中抒和，構(gòu)造函數(shù)Vehicle的return語句返回一個(gè)數(shù)值。這時(shí)彤蔽，new命令就會(huì)忽略這個(gè)return語句摧莽，返回“構(gòu)造”后的this對(duì)象。

但是顿痪，如果return語句返回的是一個(gè)跟this無關(guān)的新對(duì)象镊辕，new命令會(huì)返回這個(gè)新對(duì)象油够，而不是this對(duì)象。這一點(diǎn)需要特別引起注意丑蛤。

varVehicle=function(){this.price=1000;return{price:2000};};(newVehicle()).price// 2000

上面代碼中叠聋，構(gòu)造函數(shù)Vehicle的return語句撕阎，返回的是一個(gè)新對(duì)象受裹。new命令會(huì)返回這個(gè)對(duì)象，而不是this對(duì)象虏束。

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

functiongetMessage(){return'this is a message';}varmsg=newgetMessage();msg// {}typeofmsg// "Object"

上面代碼中照藻，getMessage是一個(gè)普通函數(shù)，返回一個(gè)字符串汗侵。對(duì)它使用new命令幸缕，會(huì)得到一個(gè)空對(duì)象。這是因?yàn)閚ew命令總是返回一個(gè)對(duì)象晰韵，要么是實(shí)例對(duì)象发乔，要么是return語句指定的對(duì)象。本例中雪猪，return語句返回的是字符串栏尚，所以new命令就忽略了該語句。

new命令簡化的內(nèi)部流程只恨，可以用下面的代碼表示译仗。

function_new(/* 構(gòu)造函數(shù) */constructor,/* 構(gòu)造函數(shù)參數(shù) */param1){// 將 arguments 對(duì)象轉(zhuǎn)為數(shù)組varargs=[].slice.call(arguments);// 取出構(gòu)造函數(shù)varconstructor=args.shift();// 創(chuàng)建一個(gè)空對(duì)象，繼承構(gòu)造函數(shù)的 prototype 屬性varcontext=Object.create(constructor.prototype);// 執(zhí)行構(gòu)造函數(shù)varresult=constructor.apply(context,args);// 如果返回結(jié)果是對(duì)象官觅，就直接返回纵菌，則返回 context 對(duì)象return(typeofresult==='object'&&result!=null)?result:context;}// 實(shí)例varactor=_new(Person,'張三',28);

new.target

函數(shù)內(nèi)部可以使用new.target屬性。如果當(dāng)前函數(shù)是new命令調(diào)用休涤，new.target指向當(dāng)前函數(shù)咱圆，否則為undefined。

functionf(){console.log(new.target===f);}f()// falsenewf()// true