如何自己實現(xiàn)JavaScript的new操作符
在介紹new之前,必須要知道什么是構造函數(shù)。
構造函數(shù)和普通函數(shù)在寫法上沒有任何區(qū)別,當一個函數(shù)通過new Fun()調用時,就叫做構造函數(shù),構造函數(shù)首字母通常大寫。
function User(name) { this.name = name;}let u = new User(’leo’);
這里,User就是構造函數(shù),當然你也可以直接調用User(),但是這樣就起不到創(chuàng)建實例的作用,在非嚴格模式下,會把name屬性掛在window上。
new 操作符那么new操作符到底做了什么事情呢,可以創(chuàng)建出一個實例?
new運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構造函數(shù)的內置對象的實例。new關鍵字會進行如下的操作:
1.創(chuàng)建一個空的簡單JavaScript對象(即**{}**);
2.鏈接該對象(即設置該對象的構造函數(shù))到另一個對象 ;
3.將步驟1新創(chuàng)建的對象作為**this**的上下文 ;
4.如果該函數(shù)沒有返回對象,則返回**this**。
以上引用自new 操作符 - MDN
可能第 2、4 步大家看的不是很明白,這里我重新總結一下這 4 個步驟:
1.創(chuàng)建一個空對象u = {}
2.綁定原型,u.__proto__ = User.prototype
3.調用User()函數(shù),并把空對象u當做this傳入,即User.call(u)
4.如果User()函數(shù)執(zhí)行完自己return一個object類型,那么返回此變量,否則返回this,注意:如果構造函數(shù)返回基本類型值,則不影響,還是返回this
自己實現(xiàn)一個 new知道了new操作符的原理,下面我們自己來實現(xiàn)一個FakeNew函數(shù)。
function FakeNew() { let obj = {}; // 將類數(shù)組 arguments 轉為數(shù)組,同時將第一個參數(shù)也就是構造函數(shù) shift 出來 let constructor = [].shift.apply(arguments); // 綁定原型 obj.__proto__ = constructor.prototype; // 調用構造函數(shù),將 obj 當做 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());
相應關鍵步驟的注釋已經附在代碼里面了,這樣我們就實現(xiàn)了一個new操作,相信大家以后再看到new,會有一種通透的感覺了。
以上就是如何自己實現(xiàn)JavaScript的new操作符的詳細內容,更多關于JavaScript的new操作符的資料請關注好吧啦網其它相關文章!
相關文章:
1. python GUI庫圖形界面開發(fā)之PyQt5動態(tài)(可拖動控件大小)布局控件QSplitter詳細使用方法與實例2. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)3. CSS清除浮動方法匯總4. 不要在HTML中濫用div5. 父div高度不能自適應子div高度的解決方案6. js開發(fā)中的頁面、屏幕、瀏覽器的位置原理(高度寬度)說明講解(附圖)7. XML 非法字符(轉義字符)8. Python數(shù)據(jù)分析JupyterNotebook3魔法命令詳解及示例9. ASP動態(tài)include文件10. vue跳轉頁面常用的幾種方法匯總
