1. 程式人生 > 程式設計 >JavaScript中new操作符的原理示例詳解

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

new的用處

new的作用是通過建構函式來建立一個例項物件,該例項與原型和建構函式之間的關係如下圖所示:

JavaScript中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、執行建構函式內部程式碼

    www.cppcns.com
  • 即給空物件新增屬性、方法。

5、返回該新物件

  • 如果建構函式內部通過 return 語句返回了一個引用型別值,則 new 操作最終返回這www.cppcns.com個引用型別值;否則返回剛建立的新物件。
  • 引用型別值:除基本型別值(數值、字串、布林值、null、undefined、Symbol 值)以外的所有值。

模擬 new 操作符

下面的 myNew 函式模擬了 new 操作符的行為

function myNew(func,...args) {
  let obj = {}
  obj.__proto__ = func.prototype
  YTJGajClet 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 instancewww.cppcns.com
of 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 是所有引用型別值的基型別。

好了,到此這篇關於中new操作符原理的文章就介紹到這了,更多相關 new操作符原理內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!