Array.map回調this指向問題

---恢復內容開始---

前幾天被qq群一個哥們問了一個問題，說他使用array的map的時候，里面回調的this指向指向了window的全局對象，而不是他自己call的數組對象。他的實現代碼如下：

\\

'1,2,3,4'.split(',').map(function(item){
   console.log(this);
   console.log(item);
});

 

其實這個問題很簡單。這個和map的實現有關。正好查閱了mozilla網站，找到了兼容舊版本的實現，算法和ECMA262里面規定的算法是一致的，代碼如下（想要自己實現算法請參照EXMA文檔，注釋有標明規范地址）：

// 實現 ECMA-262, Edition 5, 15.4.4.19
// 參考: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }

    // 1. 將O賦值為調用map方法的數組.
    var O = Object(this);

    // 2.將len賦值為數組O的長度.
    var len = O.length >>> 0;

    // 3.如果callback不是函數,則拋出TypeError異常.
    if (Object.prototype.toString.call(callback) != "[object Function]") {
      throw new TypeError(callback + " is not a function");
    }

    // 4. 如果參數thisArg有值,則將T賦值為thisArg;否則T為undefined.
    if (thisArg) {
      T = thisArg;
    }

    // 5. 創建新數組A,長度為原數組O長度len
    A = new Array(len);

    // 6. 將k賦值為0
    k = 0;

    // 7. 當 k < len 時,執行循環.
    while(k < len) {

      var kValue, mappedValue;

      //遍歷O,k為原數組索引
      if (k in O) {

        //kValue為索引k對應的值.
        kValue = O[ k ];

        // 執行callback,this指向T,參數有三個.分別是kValue:值,k:索引,O:原數組.
        mappedValue = callback.call(T, kValue, k, O);

        // 返回值添加到新數組A中.
        A[ k ] = mappedValue;
      }
      // k自增1
      k++;
    }

    // 8. 返回新數組A
    return A;
  };      
}

 

我們可以看到map是有兩個參數的，如果沒有傳遞第二個參數，那么默認就是undefined \\

// 4. 如果參數thisArg有值,則將T賦值為thisArg;否則T為undefined.
    if (thisArg) {
      T = thisArg;
    }
//這是循環里面的代碼
while(k < len) {
  ...
  // 執行callback,this指向T,參數有三個.分別是kValue:值,k:索引,O:原數組.
  mappedValue = callback.call(T, kValue, k, O);
}  

 

所以在執行回調時，T為undefined，默認就會有用頂級對象來調用。這里涉及到了call函數的一些知識點。call函數如果object參數傳入的是null或者undefined的時候，會默認指向頂級對象，在瀏覽器里，就是window對象。\\
用上面算法做兼容要注意的問題是，Object, TypeError, 和 Array 原始的構造器和值未被覆蓋並且callback傳入的回調函數的call是Function.prototype.call的默認實現，否則該實現就不能直接使用了。
\\
''參考：\\
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call \\
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map''