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

Posted on by

new的用處

new的作用是通過構造函數來創建一個實例對象，該實例與原型和構造函數之間的關系如下圖所示：

先來總結一下

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

詳細說明

執行 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)  // true
console.log(foo1.number)  // 1

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

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

好瞭，到此這篇關於JavaScript中new操作符原理的文章就介紹到這瞭,更多相關JS new操作符原理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：