如何自己實現JavaScript的new操作符
建構函式
在介紹new之前,必須要知道什麼是建構函式。
建構函式和普通函式在寫法上沒有任何區別,當一個函式通過new Fun()呼叫時,就叫做建構函式,建構函式首字母通常大寫。
function User(name) { this.name = name; } let u = new User('leo');
這裡,User就是建構函式,當然你也可以直接呼叫User(),但是這樣就起不到建立例項的作用,在非嚴格模式下,會把name屬性掛在window上。
nwww.cppcns.comew 操作符
那麼new操作符到底做了什麼事情呢,可以創建出一個例項?
new運算子建立一個使用者定義的物件型別的例項或具有建構函式的內建物件的例項。new關鍵字會進行如下的操作:
1.建立一個空的簡單javascript物件(即**http://www.cppcns.com{}**);
2.連結該物件(即設定該物件的建構函式)到另一個物件 ;
3.將步驟1新建立的物件作為**this**的上下文 ;
4.如程式設計客棧果該函式沒有返回物件,則返回**this**。
以上引用自new 操作符 - MDN
可能第 2、4 步大家看的不是很明白,這裡我重新總結一下這 4 個步驟:
1.建立一個空物件程式設計客棧u = {}
2.繫結原型,u.__proto__ = Us程式設計客棧er.prototype
3.呼叫User()函式,並把空物件u當做this傳入,即User.call(u)
4.如果User()函式執行完自己return一個object型別,那麼返回此變數,否則返回this,注意:如果建構函式返回基本型別值,則不影響,還是返回this
自己實現一個 new
知道了new操作符的原理,下面我們自己來實現一個FakeNew函式。
function FakeNew() { let obj = {}; // 將類陣列 arguments 轉為陣列,同時將第一個引數也就是建構函式 shift 出來 let constructor = [].shift.apply(arguments); // 繫結原型 obj.__proto__ = constructor.prototype; // 呼叫建構函式,將 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());
相應關鍵步驟的註釋已經附在程式碼裡面了,這樣我們就實現了一個new操作,相信大家以後再看到new,會有一種通透的感覺了。
以上就是如何自己實現javaScript的new操作符的詳細內容,更多關於JavaScript的new操作符的資料請關注我們其它相關文章!