js中new操作符原理解析


js中使用new操作符時,到底做了哪些事情?

在js中,我們經常會用到 new 操作符,當我們對構造函數使用new操作符時,具體做了哪些事情呢?

它會完成以下四個步驟:

1.創建一個空的對象

2.設置原型鏈:將新對象的constructor屬性設置為構造函數信息,設置新對象的__proto__屬性指向構造函數的prototype對象

3.讓構造函數中的this指向新對象,並執行構造函數的函數體

4.判斷構造函數的返回值類型,將初始化完成的對象地址,保存到等號左邊的變量中

 

結合代碼分析:

var Func = function() {

  ...

}

var func = new Func()

 

我們來具體分析:

new一共經歷了4個階段:

  1.創建一個空對象

  var obj = {}

  2.設置原型鏈

  obj.__proto__ = Func.prototype

  3.讓Func中的 this 指向 obj,並執行Func的函數體。(因為創建新的對象后,構造函數的作用域賦給了新對象,所以 this 指向了新對象)

  var res = Func.call(obj)

  4.判斷Func的返回值類型

    如果是基本數據類型,則返回obj,如果是引用數據類型,則返回引用類型的對象

    if (typeof(res)=== "object"){

      func = res

    }else {

      func = obj

    }

注意:在構造函數沒有返回值的情況下,返回新創建的對象;

    如果構造函數有返回值res,那么就要判斷值的類型:

      返回值res為基本數據類型(string、number、null、undefined、boolean、symbol),那么返回新創建的對象。

      返回值res為引用數據類型時,函數的返回值res才為指定對象,此時返回res。

 

結合實例我們來看一下:

  構造函數沒有返回值的情況:

  

 

  構造函數返回值為基本數據類型的情況:

  

  構造函數返回值為引用數據類型的情況:

  

 

Person {name : "Sunwukong"}{name : "Zhubajie"}

  可以看出,當返回值是引用類型時,則使用 return 的對象,此時 new 操作也失效了。

 

 


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM