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