如何自己實(shí)現(xiàn)JavaScript的new操作符
在介紹new之前,必須要知道什么是構(gòu)造函數(shù)。
構(gòu)造函數(shù)和普通函數(shù)在寫法上沒有任何區(qū)別,當(dāng)一個(gè)函數(shù)通過new Fun()調(diào)用時(shí),就叫做構(gòu)造函數(shù),構(gòu)造函數(shù)首字母通常大寫。
function User(name) { this.name = name;}let u = new User(’leo’);
這里,User就是構(gòu)造函數(shù),當(dāng)然你也可以直接調(diào)用User(),但是這樣就起不到創(chuàng)建實(shí)例的作用,在非嚴(yán)格模式下,會(huì)把name屬性掛在window上。
new 操作符那么new操作符到底做了什么事情呢,可以創(chuàng)建出一個(gè)實(shí)例?
new運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。new關(guān)鍵字會(huì)進(jìn)行如下的操作:
1.創(chuàng)建一個(gè)空的簡(jiǎn)單JavaScript對(duì)象(即**{}**);
2.鏈接該對(duì)象(即設(shè)置該對(duì)象的構(gòu)造函數(shù))到另一個(gè)對(duì)象 ;
3.將步驟1新創(chuàng)建的對(duì)象作為**this**的上下文 ;
4.如果該函數(shù)沒有返回對(duì)象,則返回**this**。
以上引用自new 操作符 - MDN
可能第 2、4 步大家看的不是很明白,這里我重新總結(jié)一下這 4 個(gè)步驟:
1.創(chuàng)建一個(gè)空對(duì)象u = {}
2.綁定原型,u.__proto__ = User.prototype
3.調(diào)用User()函數(shù),并把空對(duì)象u當(dāng)做this傳入,即User.call(u)
4.如果User()函數(shù)執(zhí)行完自己return一個(gè)object類型,那么返回此變量,否則返回this,注意:如果構(gòu)造函數(shù)返回基本類型值,則不影響,還是返回this
自己實(shí)現(xiàn)一個(gè) new知道了new操作符的原理,下面我們自己來實(shí)現(xiàn)一個(gè)FakeNew函數(shù)。
function FakeNew() { let obj = {}; // 將類數(shù)組 arguments 轉(zhuǎn)為數(shù)組,同時(shí)將第一個(gè)參數(shù)也就是構(gòu)造函數(shù) shift 出來 let constructor = [].shift.apply(arguments); // 綁定原型 obj.__proto__ = constructor.prototype; // 調(diào)用構(gòu)造函數(shù),將 obj 當(dāng)做 this 傳入 let res = Constructor.apply(obj, arguments);// 返回 return typeof res === ’object’ ? res : obj; }function User(name) { this.name = name;}User.prototype.getName = function() { return this.name;}let u = FakeNew(User, ’leo’);console.log(u);console.log(u.getName());
相應(yīng)關(guān)鍵步驟的注釋已經(jīng)附在代碼里面了,這樣我們就實(shí)現(xiàn)了一個(gè)new操作,相信大家以后再看到new,會(huì)有一種通透的感覺了。
以上就是如何自己實(shí)現(xiàn)JavaScript的new操作符的詳細(xì)內(nèi)容,更多關(guān)于JavaScript的new操作符的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. .NET中l(wèi)ambda表達(dá)式合并問題及解決方法2. JSP數(shù)據(jù)交互實(shí)現(xiàn)過程解析3. 淺談python出錯(cuò)時(shí)traceback的解讀4. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法5. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼6. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解7. windows服務(wù)器使用IIS時(shí)thinkphp搜索中文無效問題8. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向9. Nginx+php配置文件及原理解析10. 在Android中使用WebSocket實(shí)現(xiàn)消息通信的方法詳解
