javascript構(gòu)造函數(shù)及new運(yùn)算符

1、JavaScript構(gòu)造函數(shù)及new運(yùn)算符和其他高級(jí)語言一樣JavaScript中也有構(gòu)造函數(shù)和new運(yùn)算符，我們知道new是用來實(shí)例化一個(gè)類，從而在內(nèi)存中分配一個(gè)實(shí)例對(duì)象。但在Javascript中，萬物皆對(duì)象，為什么還要通過new來產(chǎn)生對(duì)象？1、認(rèn)識(shí)new運(yùn)算符functionAnimal(name)=name;Animal.c010r="black"conso1e.1og("I'm"+);varcat=newAnimal("cat");console.log(,/cat

2、cat.height/undefined);cat.say();/I'mcatconsole.log(A,/AnimalAnimal.color/backis not a function);Animal.say();/Animal.say假設(shè)你能理解上面輸出的結(jié)果，說明你已非常理解new和this的運(yùn)行機(jī)制，請(qǐng)忽略本文！我們將通過解析這個(gè)例子來加深你對(duì)js中new運(yùn)算符的理解！PS:假設(shè)彳對(duì)this還不理解，請(qǐng)先閱讀：JS作用域和this關(guān)鍵字2、代碼解讀1-3行創(chuàng)立了一個(gè)函數(shù)Animal,并在其this上定義了屬性：name,name的值是函數(shù)被執(zhí)行時(shí)的形參。第

3、4行在Animal對(duì)象Animal本身是一個(gè)函數(shù)對(duì)象上定義了一個(gè)靜態(tài)屬性：color,并賦值“black"5-7行在Animal函數(shù)的原型對(duì)象prototype上定義了一個(gè)say()方法，say方法輸出了this的name值。第8行通過new關(guān)鍵字創(chuàng)立了一個(gè)新對(duì)象cat10-14行cat對(duì)象嘗t訪問name和color屬性，并調(diào)用say方法。16-20行Animal對(duì)象嘗t訪問name和color屬性，并調(diào)用say方法。3、重點(diǎn)解析第8行代碼是關(guān)鍵：varcat=newAnimal("cat");Animal本身是一個(gè)普通函數(shù)，但當(dāng)通過new來創(chuàng)立對(duì)象時(shí)，Anim

4、al就是構(gòu)造函數(shù)。JS引擎執(zhí)行這句代碼時(shí)，在內(nèi)部做了很多工作，用偽代碼模擬其工作流程如下：newAnimal("cat")=varobj=;obj._proto_=Atotype;varresult=Animal.call(obj,"cat");returntypeofresult='object'?result:obj;1創(chuàng)立一個(gè)空對(duì)象obj;2把obj的_proto_指向構(gòu)造函數(shù)Animal的原型對(duì)象prototype,此時(shí)便建立了obj對(duì)象的原型鏈：obj->Atotype->Obje

5、totype->nullPS:假設(shè)你不理解JS原型鏈，請(qǐng)先閱讀：JS原型和原型鏈3在obj對(duì)象的執(zhí)行環(huán)境調(diào)用Animal函數(shù)并傳遞參數(shù)"cat"。相當(dāng)于varresult=obj.Animal("cat")。當(dāng)這句執(zhí)行完之后，obj便產(chǎn)生了屬性name并賦彳1為"cat"?！娟P(guān)于JS中call的用法請(qǐng)閱讀：JS的call和apply4考察第3步返回的返回值，假設(shè)無返回值或者返回一個(gè)非對(duì)象值，那么將obj返回作為新對(duì)象；否那么會(huì)將返回值作為新對(duì)象返回。理解了其運(yùn)行機(jī)制以后，我們知道cat其實(shí)就是過程4的返回值，因此我們

6、對(duì)cat對(duì)象的認(rèn)知就多了一些：cat的原型鏈?zhǔn)牵篶at->Atotype->Ototype->nullcat上新增了一個(gè)屬性：name分析完了cat的產(chǎn)生過程，我們?cè)倏纯摧敵鼋Y(jié)果：cat.color->cat會(huì)先查找自身的color,沒有找到便會(huì)沿著原型鏈查找，在上述例子中，我們僅在Animal對(duì)象上定義了color,并沒有在其原型鏈上定義，因此找不到。cat.say->cat會(huì)先查找自身的say方法，沒有找到便會(huì)沿著原型鏈查找，在上述例子中，我們?cè)贏nimal的prototype上定義了say,因此在原型鏈上找到了say方法。

7、另外，在say方法中還訪問,這里的this指的是其調(diào)用者obj,因此輸出的是的值。對(duì)于Animal來說，它本身也是一個(gè)對(duì)象，因此，它在訪問屬性和方法時(shí)也遵守上述查找規(guī)那么，所以：Animal.c010r->"black"A->"Animal",Animal先查找自身的name,找到了name,但這個(gè)name不是我們定義的name,而是函數(shù)對(duì)象內(nèi)置的屬性。一般情況下，函數(shù)對(duì)象在產(chǎn)生時(shí)會(huì)內(nèi)置name屬性并將函數(shù)名作為賦值僅函數(shù)對(duì)象Animal.say->Animal在自身沒有找到say方

8、法，也會(huì)沿著其原型鏈查找，話說Animal的原型鏈?zhǔn)鞘裁茨兀?gt; Animal._proto_> functi.on()> Animal._proto_""Ftotype*true>Ftotyper_soto>-Ototype<true>Object,prototype_proto_null從測試結(jié)果看：Animal的原型鏈?zhǔn)沁@樣的：Animal->Ftotype->Ototype->null因此Animal的原型鏈

9、上沒有定義say方法!4、new存在的意義認(rèn)識(shí)了new運(yùn)算符之后，我們?cè)倩氐介_篇提到的問題：JS中萬物皆對(duì)象，為什么還要通過new來產(chǎn)生對(duì)象？要弄明白這個(gè)問題，我們首先要搞清楚cat和Animal的關(guān)系：通過上面的分析，我們發(fā)現(xiàn)cat繼承了Animal中的部分屬性，因此我們可以簡單的理解：Animal和cat是繼承關(guān)系。另一方面，cat是通過new產(chǎn)生的對(duì)象，那么cat到底是不是Animal的實(shí)例對(duì)象？我們先來理解一下JS是如何來定義"實(shí)例對(duì)象'的？AinstanceofB假設(shè)上述表達(dá)式為true,JS認(rèn)為A是B的實(shí)例對(duì)象，我們用這個(gè)方法來判斷一下cat和AnimalcatinstanceofAnimal;/true從執(zhí)行結(jié)果看：cat確實(shí)是Animal實(shí)例，要想證實(shí)這個(gè)結(jié)果，我們?cè)賮砝斫庖幌翵S中instanceof的判斷規(guī)那么：varL=A._proto_;varR=B.prototype;if(L=R)returntrue;假設(shè)A的_proto_等價(jià)于B的prototype,就返回true在new的執(zhí)行過程2中，cat的_proto_指向了Animal的prototype,所以ca