js構(gòu)造函數(shù)創(chuàng)建對(duì)象是否加new問(wèn)題
今天看到這樣一道題:
填寫(xiě)"TO DO"處的內(nèi)容讓下面代碼支持a.name = "name1"; b.name = "name2";
function Obj(name){ // TO DO } obj. /* TO DO */ = "name2"; var a = Obj("name1"); var b = new Obj;
問(wèn)題1:new操作符做了些什么呢?
創(chuàng)建一個(gè)新對(duì)象;
將構(gòu)造函數(shù)的作用域賦給新對(duì)象(因此 this 就指向了這個(gè)新對(duì)象) ;
執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性) ;
返回新對(duì)象。
問(wèn)題2:不加new操作符直接執(zhí)行構(gòu)造函數(shù)會(huì)發(fā)生什呢?
function Obj(name){ this.name = name; console.log(this); // 嚴(yán)格模式下是undefined 非嚴(yán)格模式下是window對(duì)象 } var a = Obj("name1"); console.log(a); // 結(jié)果 => undefined
哦,原來(lái)只是當(dāng)作正常的函數(shù)調(diào)用來(lái)執(zhí)行,Obj沒(méi)有返回值,故a是undefined。
兩者區(qū)別總結(jié)
使用new操作符創(chuàng)建對(duì)象,并且構(gòu)造函數(shù)沒(méi)有返回值或者返回為基本數(shù)據(jù)類(lèi)型,那么返回該對(duì)象,如下例:
function Obj(name){ this.name = name; } var b = new Obj; console.log(b); // Obj { name: undefined } function Obj(name){ this.name = name; return 'chic'; } var b = new Obj; console.log(b); // 同上
如果構(gòu)造函數(shù)返回一個(gè)引用類(lèi)型:
function Obj(name){ this.name = name; return {}; } var b = new Obj; console.log(b); // {}
總結(jié)
對(duì)于不加new來(lái)執(zhí)行構(gòu)造函數(shù)來(lái)說(shuō),返回值就是構(gòu)造函數(shù)的執(zhí)行結(jié)果;對(duì)于加new關(guān)鍵字來(lái)執(zhí)行構(gòu)造函數(shù)而言,如果return的是基本數(shù)據(jù)類(lèi)型,那么忽視掉該return值,如果返回的是一個(gè)引用類(lèi)型,那么返回該引用類(lèi)型。
那么問(wèn)題答案你有了嗎?
參考答案 :
function Obj(name){ this.name = name; return this; } Obj.prototype.name = "name2"; var a = Obj("name1"); var b = new Obj;
以上就是我們給大家整理的js構(gòu)造函數(shù)創(chuàng)建對(duì)象是否加new問(wèn)題的全部?jī)?nèi)容,大家閱讀后還有疑問(wèn)可以在下方留言區(qū)討論,感謝你對(duì)腳本之家的支持。
- 詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法
- JS 創(chuàng)建對(duì)象的模式實(shí)例小結(jié)
- javascript面向?qū)ο髣?chuàng)建對(duì)象的方式小結(jié)
- JS使用new操作符創(chuàng)建對(duì)象的方法分析
- 詳解js創(chuàng)建對(duì)象的幾種方法及繼承
- 詳解js 創(chuàng)建對(duì)象的幾種方法
- javascript動(dòng)態(tài)創(chuàng)建對(duì)象的屬性詳解
- JavaScript創(chuàng)建對(duì)象的七種方式(推薦)
- 深入理解JavaScript創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)
- JavaScript中創(chuàng)建對(duì)象的7種模式詳解
- js 創(chuàng)建對(duì)象的多種方式與優(yōu)缺點(diǎn)小結(jié)
相關(guān)文章
js中AppendChild與insertBefore的用法詳細(xì)解析
這篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12原生JS實(shí)現(xiàn)的雪花飄落動(dòng)畫(huà)效果
這篇文章主要介紹了原生JS實(shí)現(xiàn)的雪花飄落動(dòng)畫(huà)效果,涉及javascript數(shù)值運(yùn)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05小程序使用watch監(jiān)聽(tīng)數(shù)據(jù)變化的方法詳解
這篇文章主要介紹了小程序使用watch監(jiān)聽(tīng)數(shù)據(jù)變化的方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09單線程JavaScript實(shí)現(xiàn)異步過(guò)程詳解
這篇文章主要介紹了單線程JavaScript實(shí)現(xiàn)異步過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05Cropper.js入門(mén)之在HTML中實(shí)現(xiàn)交互式圖像裁剪
這篇文章主要為大家介紹了Cropper.js入門(mén)之在HTML中實(shí)現(xiàn)交互式圖像裁剪示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10