JavaScript中new操作符的原理示例詳解
new的作用是通過構造函數來創建一個實例對象,該實例與原型和構造函數之間的關系如下圖所示:
執行 new 操作時會依次經過以下步驟:
1、創建一個空對象
空對象是 Object 的實例,即 {} 。let obj = {}
2、空對象的內部屬性 __proto__ 賦值為構造函數的 prototype 屬性
該操作是為了將空對象鏈接到正確的原型上去function Foo(num) { this.number = num}obj.__proto__ = Foo.prototype
3、將構造函數的 this 指向空對象
即構造函數內部的 this 被賦值為空對象,以便后面正確執行構造函數。Foo.call(obj, 1)
4、執行構造函數內部代碼
即給空對象添加屬性、方法。5、返回該新對象
如果構造函數內部通過 return 語句返回了一個引用類型值,則 new 操作最終返回這個引用類型值;否則返回剛創建的新對象。 引用類型值:除基本類型值(數值、字符串、布爾值、null、undefined、Symbol 值)以外的所有值。模擬 new 操作符下面的 myNew 函數模擬了 new 操作符的行為
function myNew(func, ...args) { let obj = {} obj.__proto__ = func.prototype let res = func.apply(obj, args) return res instanceof Object ? res : obj}function Foo(num) { this.number = num}let foo1 = myNew(Foo, 1)console.log(foo1 instanceof Foo) // trueconsole.log(foo1.number) // 1let foo2 = new Foo(2)console.log(foo2 instanceof Foo) // trueconsole.log(foo2.number) // 2
上面通過 instanceof 操作符來判斷構造函數的返回值是否為 Object 的實例,即是否為引用類型值;這是因為所有引用類型值都是 Object 的實例,Object 是所有引用類型值的基類型。
好了,到此這篇關于JavaScript中new操作符原理的文章就介紹到這了,更多相關JS new操作符原理內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!
相關文章: