JavaScript中new操作符有什么用

這篇文章給大家分享的是有關(guān)JavaScript中new操作符有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

 js模擬new操作符的實現(xiàn)

這個問題如果你在掘金上搜，你可能會搜索到類似下面的回答：

 說實話，看第一遍，我是不理解的，我需要去理一遍原型及原型鏈的知識才能理解。所以我覺得MDN對new的解釋更容易理解：

new 運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象的實例。new 關(guān)鍵字會進(jìn)行如下的操作：

1. 創(chuàng)建一個空的簡單JavaScript對象（即{}）；

2. 鏈接該對象（即設(shè)置該對象的構(gòu)造函數(shù)）到另一個對象 ；

3. 將步驟1新創(chuàng)建的對象作為this的上下文 ；

4. 如果該函數(shù)沒有返回對象，則返回this。

接下來我們看實現(xiàn)：

function Dog(name, color, age) {
  this.name = name;
  this.color = color;
  this.age = age;}Dog.prototype={
  getName: function() {
    return this.name  }}var dog = new Dog('大黃', 'yellow', 3)

上面的代碼相信不用解釋，大家都懂。我們來看最后一行帶new關(guān)鍵字的代碼，按照上述的1,2,3,4步來解析new背后的操作。

第一步：創(chuàng)建一個簡單空對象

var obj = {}

第二步：鏈接該對象到另一個對象（原型鏈）

// 設(shè)置原型鏈obj.__proto__ = Dog.prototype

第三步：將步驟1新創(chuàng)建的對象作為 this 的上下文

// this指向obj對象Dog.apply(obj, ['大黃', 'yellow', 3])

第四步：如果該函數(shù)沒有返回對象，則返回this

// 因為 Dog() 沒有返回值，所以返回objvar dog = obj
dog.getName() // '大黃'

需要注意的是如果 Dog() 有 return 則返回 return的值

var rtnObj = {}function Dog(name, color, age) {
  // ...
  //返回一個對象
  return rtnObj}var dog = new Dog('大黃', 'yellow', 3)console.log(dog === rtnObj) // true

接下來我們將以上步驟封裝成一個對象實例化方法，即模擬new的操作：

function objectFactory(){
    var obj = {};
    //取得該方法的第一個參數(shù)(并刪除第一個參數(shù))，該參數(shù)是構(gòu)造函數(shù)
    var Constructor = [].shift.apply(arguments);
    //將新對象的內(nèi)部屬性__proto__指向構(gòu)造函數(shù)的原型，這樣新對象就可以訪問原型中的屬性和方法
    obj.__proto__ = Constructor.prototype;
    //取得構(gòu)造函數(shù)的返回值
    var ret = Constructor.apply(obj, arguments);
    //如果返回值是一個對象就返回該對象，否則返回構(gòu)造函數(shù)的一個實例對象
    return typeof ret === "object" ? ret : obj;}

感謝各位的閱讀！關(guān)于“JavaScript中new操作符有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！