JavaScript中new操作符的原理示例詳解

new的用處

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

先來(lái)總結一下

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

詳細說(shuō)明

執行 new 操作時(shí)會(huì )依次經(jīng)過(guò)以下步驟：

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

• 空對象是 Object 的實(shí)例，即 {} 。

let obj = {}

2、空對象的內部屬性 __proto__ 賦值為構造函數的 prototype 屬性

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

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

obj.__proto__ = Foo.prototype

3、將構造函數的 this 指向空對象

• 即構造函數內部的 this 被賦值為空對象，以便后面正確執行構造函數。

Foo.call(obj, 1)

4、執行構造函數內部代碼

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

5、返回該新對象

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

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

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

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