JavaScript中的this關鍵字

this 關鍵字在 JavaScript 中既經常使用，功能又強大，但不少時候容易混淆其指向的對象。下面經過兩個例子來理解一下 this 。

看第一個例子：

var style = {
  color: "Window Color"
};
var object = {
  style: {
    color: "Object Color"
  }
};
function sayColor(){
  console.log(this.style.color);
}
//使用.bind() 改變函數 this 指向
varsayObjectColor = sayColor.bind(object);
//調用
sayColor(); //"WindowColor"
sayColor.call(); //"Window Color"
sayColor.apply(); //"Window Color"
sayColor.call(object); //"Object Color"
sayColor.apply(object); //"Object Color"
sayObjectColor(); //"Object Color"

前三次調用時，this指向 window 對象，後三次調用時，this 指向 window.object 對象，其中最後一次經過 .bind() 改變了函數的 this 指向，有關 .bind() 在以後的博客中會進一步探討。

補充：call() 和 apply()

經過 call() 和 apply() 能夠改變函數調用的上下文，二者功能相同，區別僅僅在於接收參數的方式不一樣：

1. call() 方法第一個參數爲函數調用的上下文，其他參數直接傳遞給函數，傳遞的參數必須逐個列舉；

2. apply() 方法第一個參數爲函數調用的上下文，另外一個是參數數組，能夠是Array的實例，也能夠是arguments對象。

再看一個複雜一點的例子：

var name = "WindowName";
var firstObj = {
  name: "First Object Name",
  getName: function() {
    return this.name;
  }
};
var secondObj = {
  name: "Second Object Name",
  getName: function() {
    return function() {
      return this.name;
    };
  }
};
var thirdObj = {
  name: "Third Object Name",
  getName: function() {
    var that = this; //定義that變量，保存this對象
    return function() {
      return that.name; //經過閉包訪問
    };
  }
};
//調用
firstObj.getName(); //"First Object Name"
secondObj.getName()(); //"Window Name"
thirdObj.getName()(); //"Third Object Name"

其中，第一次調用時this 指向 firstObj ，由於 fristObj.getName是一個函數，而它經過 firstObj.getName() 在 firstObj 上下文中被調用。

第二次調用時 this指向 window ，由於 secondObj.getName() 是一個函數，而它經過 secondObj.getName()() 在 window 上下文中被調用。

第三次調用時，用到了閉包，閉包是指有權訪問另外一個函數做用域中的變量的函數，在這裏經過閉包訪問到了 getName 中定義的 that 變量，而該變量中的 this 指向 thirdObj 。

有關閉包咱們放到下一篇博客中去探討，博客地址：

http://xitongjiagoushi.blog.51cto.com/9975742/1672553

最後，總結成一句話，this 的指向是由它所在函數調用的上下文決定的，而不是由它所在函數定義的上下文決定的。

 

完。

拓展閱讀：

JavaScript事件中的this ：http://www.quirksmode.org/js/this.html