JavaScript中new操作符有什么用

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

 js模擬new操作符的實現

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

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

new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。new 關鍵字會進行如下的操作：

1. 創建一個空的簡單JavaScript對象（即{}）；

2. 鏈接該對象（即設置該對象的構造函數）到另一個對象 ；

3. 將步驟1新創建的對象作為this的上下文 ；

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

接下來我們看實現：

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關鍵字的代碼，按照上述的1,2,3,4步來解析new背后的操作。

第一步：創建一個簡單空對象

var obj = {}

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

// 設置原型鏈obj.__proto__ = Dog.prototype

第三步：將步驟1新創建的對象作為 this 的上下文

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

第四步：如果該函數沒有返回對象，則返回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 = {};
    //取得該方法的第一個參數(并刪除第一個參數)，該參數是構造函數
    var Constructor = [].shift.apply(arguments);
    //將新對象的內部屬性__proto__指向構造函數的原型，這樣新對象就可以訪問原型中的屬性和方法
    obj.__proto__ = Constructor.prototype;
    //取得構造函數的返回值
    var ret = Constructor.apply(obj, arguments);
    //如果返回值是一個對象就返回該對象，否則返回構造函數的一個實例對象
    return typeof ret === "object" ? ret : obj;}

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