new的用處

new的作用是通過構(gòu)造函數(shù)來創(chuàng)建一個實例對象，該實例與原型和構(gòu)造函數(shù)之間的關(guān)系如下圖所示：

先來總結(jié)一下

1. 創(chuàng)建一個空對象
2. 空對象的內(nèi)部屬性 __proto__ 賦值為構(gòu)造函數(shù)的 prototype 屬性
3. 將構(gòu)造函數(shù)的 this 指向空對象
4. 執(zhí)行構(gòu)造函數(shù)內(nèi)部代碼
5. 返回該新對象

詳細說明

執(zhí)行 new 操作時會依次經(jīng)過以下步驟：

1、創(chuàng)建一個空對象

• 空對象是 Object 的實例，即 {} 。

let obj = {}

2、空對象的內(nèi)部屬性 __proto__ 賦值為構(gòu)造函數(shù)的 prototype 屬性

• 該操作是為了將空對象鏈接到正確的原型上去

function Foo(num) {
  this.number = num
}

obj.__proto__ = Foo.prototype

3、將構(gòu)造函數(shù)的 this 指向空對象

• 即構(gòu)造函數(shù)內(nèi)部的 this 被賦值為空對象，以便后面正確執(zhí)行構(gòu)造函數(shù)。

Foo.call(obj, 1)

4、執(zhí)行構(gòu)造函數(shù)內(nèi)部代碼

• 即給空對象添加屬性、方法。

5、返回該新對象

• 如果構(gòu)造函數(shù)內(nèi)部通過 return 語句返回了一個引用類型值，則 new 操作最終返回這個引用類型值；否則返回剛創(chuàng)建的新對象。
• 引用類型值：除基本類型值（數(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)  // true
console.log(foo1.number)  // 1

let foo2 = new Foo(2)
console.log(foo2 instanceof Foo)  // true
console.log(foo2.number)  // 2

上面通過 instanceof 操作符來判斷構(gòu)造函數(shù)的返回值是否為 Object 的實例，即是否為引用類型值；這是因為所有引用類型值都是 Object 的實例，Object 是所有引用類型值的基類型。

好了，到此這篇關(guān)于JavaScript中new操作符原理的文章就介紹到這了,更多相關(guān)JS new操作符原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論