Javascript的無new構(gòu)建實例詳解
看jquery源代碼第一步的時候，對于jquery對象的創(chuàng)建就看的云里霧里，琢磨半天終于有點感覺了，在此記錄下
第一種方式：
var A = function(){
return A.prototype.init();
}
A.prototype = {
init:function(){
this.age = 50;
console.log(this);
return this;
},
age:100
}
console.log(A() === new A());
1.分析下結(jié)果為什么為true
A()內(nèi)部調(diào)用的是A.prototype.init()函數(shù)
new A() 內(nèi)部會調(diào)用構(gòu)造函數(shù)，而它的構(gòu)造函數(shù)就是function(){return A.prototype.init();}，同樣調(diào)用的是A.prototype.init()函數(shù)
2.分析下A.prototype.init()函數(shù)返回什么
那就要看this了，判斷this指向誰，我們要在函數(shù)調(diào)用的時候分析，由于它是作為原型對象的屬性調(diào)用的，所以this就是原型對象A.prototype
這種創(chuàng)建方式，無論你調(diào)用多少次A()，他們其實都是返回的同一個對象，所以對b對象的修改會影響a對象，見下圖
var a = A(); var b = A(); console.log(a.age); console.log(b.age); b.age = 22; console.log(a.age); console.log(b.age);
那么如何解決這種問題呢，接下來就講下第二種方式，它也是jquery采用的方式
第二種方式
var A = function(){
return new A.prototype.init();//①
}
A.prototype = {
init:function(){
this.age = 50;
console.log(this);
return this;
},
age:100
}
A.prototype.init.prototype = A.prototype;//② var a = new A(); var b = new A(); console.log(a===b); console.log(a.age); console.log(b.age); b.age = 22; console.log(a.age); console.log(b.age);
分析下①和②
①中new A.prototype.init()主要做了三件事
創(chuàng)建一個空對象var obj = {};
obj對象屬性_proto_指向函數(shù)A.prototype.init的prototype;
將A.prototype.init函數(shù)的this替換成obj對象，在調(diào)用A.prototype.init函數(shù)，A.prototype.init.call(obj),并返回新對象
因為①返回的對象的原型是A.prototype.init.prototype，它和A.prototype并沒什么關(guān)系，為了使新返回的對象可以繼承自A.prototype，所以②讓A.prototype.init.prototype指向A.prototype
所以方式二即創(chuàng)建了實例，又保證了各自的作用域獨立。
以上所述是小編給大家介紹的Javascript的無new構(gòu)建實例詳解，希望對大家以上幫助，如果大家想了解更多資訊，敬請關(guān)注腳本之家網(wǎng)站！
相關(guān)文章
微信小程序非跳轉(zhuǎn)式組件授權(quán)登錄的方法示例
這篇文章主要介紹了微信小程序非跳轉(zhuǎn)式組件授權(quán)登錄的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼
下面筆者就為大家分享一篇實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼，代碼簡潔，具有很好的參考價值，希望對大家有所幫助2017-11-11
這篇文章主要介紹了ES7之Async/await的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
跟我學(xué)習(xí)JScript的Bug與內(nèi)存管理
跟我學(xué)習(xí)JScript的Bug與內(nèi)存管理，小編對JScript的Bug與內(nèi)存管理也不甚了解，所以整理了本篇文章，希望可以解決大家學(xué)習(xí)時的困擾。2015-11-11
這篇文章主要介紹了如何使用JavaScript實現(xiàn)棧與隊列。棧和隊列是web開發(fā)中最常用的兩種數(shù)據(jù)結(jié)構(gòu)。絕大多數(shù)用戶，甚至包括web開發(fā)人員，都不知道這個驚人的事實。,需要的朋友可以參考下2019-06-06
NodeJs中的非阻塞方法介紹，需要的朋友可以參考下2012-06-06
詳解JavaScript中Hash Map映射結(jié)構(gòu)的實現(xiàn)
Hash Map通常在JavaScript中作為一個簡單的來存儲鍵值對的地方,不過哈希對象Object并不是一個真正的哈希映射,沒Java中的Hash Map來的那么強大,well,接下來帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實現(xiàn)2016-05-05
這篇文章主要介紹了微信小程序swiper組件用法,結(jié)合實例形式分析了微信小程序中swiper組件的功能、使用方法,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了JavaScript二叉樹及各種遍歷算法詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了JS實現(xiàn)從表格中動態(tài)刪除指定行的方法,通過getElementById獲取指定行再使用deleteRow方法來實現(xiàn)刪除行的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03