JavaScript中new操作符的原理示例詳解
new的作用是通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)實(shí)例對(duì)象,該實(shí)例與原型和構(gòu)造函數(shù)之間的關(guān)系如下圖所示:

執(zhí)行 new 操作時(shí)會(huì)依次經(jīng)過(guò)以下步驟:
1、創(chuàng)建一個(gè)空對(duì)象
空對(duì)象是 Object 的實(shí)例,即 {} 。let obj = {}
2、空對(duì)象的內(nèi)部屬性 __proto__ 賦值為構(gòu)造函數(shù)的 prototype 屬性
該操作是為了將空對(duì)象鏈接到正確的原型上去function Foo(num) { this.number = num}obj.__proto__ = Foo.prototype
3、將構(gòu)造函數(shù)的 this 指向空對(duì)象
即構(gòu)造函數(shù)內(nèi)部的 this 被賦值為空對(duì)象,以便后面正確執(zhí)行構(gòu)造函數(shù)。Foo.call(obj, 1)
4、執(zhí)行構(gòu)造函數(shù)內(nèi)部代碼
即給空對(duì)象添加屬性、方法。5、返回該新對(duì)象
如果構(gòu)造函數(shù)內(nèi)部通過(guò) return 語(yǔ)句返回了一個(gè)引用類型值,則 new 操作最終返回這個(gè)引用類型值;否則返回剛創(chuàng)建的新對(duì)象。 引用類型值:除基本類型值(數(shù)值、字符串、布爾值、null、undefined、Symbol 值)以外的所有值。模擬 new 操作符下面的 myNew 函數(shù)模擬了 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
上面通過(guò) instanceof 操作符來(lái)判斷構(gòu)造函數(shù)的返回值是否為 Object 的實(shí)例,即是否為引用類型值;這是因?yàn)樗幸妙愋椭刀际?Object 的實(shí)例,Object 是所有引用類型值的基類型。
好了,到此這篇關(guān)于JavaScript中new操作符原理的文章就介紹到這了,更多相關(guān)JS new操作符原理內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例2. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法3. 如何在python中執(zhí)行另一個(gè)py文件4. Python基于requests庫(kù)爬取網(wǎng)站信息5. 如何從Python的cmd中獲得.py文件參數(shù)6. 資深程序員:給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告!7. 使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel8. python中文本字符處理的簡(jiǎn)單方法記錄9. ASP基礎(chǔ)知識(shí)Command對(duì)象講解10. Python-openpyxl表格讀取寫(xiě)入的案例詳解

網(wǎng)公網(wǎng)安備