实例解析Js中的this
零 从一个例子说起
前几天在看面试题的时候看到了这样一段程序：
obj = {
name: 'a',
getName: function () {
console.log(this.name);
}
};
var fn = obj.getName;obj.getName();fn();
要求问题是这里fn()执行的结果和执行时this的指向问题。下面结合这个例子与其中的疑问重新总结一下this的使用。
一 this的执行环境
this的指向要根据其执行环境来决定，主要有以下几种情况：
1 全局上下文环境
全局环境即在任何函数的外部，使用this，则this都指代全局对象。如在浏览器中：
this === window // true
2 函数上下文环境
在函数上下文环境，即函数内部调用使用this，要取决于this的调用方式。
2.1 简单调用
在简单调用时，函数中的this指向全局对象，比如：
function myFun() {
console.log(this === window);
}
myFun(); // true
上面这个例子中直接调用了函数myFun，其中的this就等于全局对象window。
其中的原理就是在声明myFun这一函数时，它作为全局对象的一个属性存在。所以直接使用此函数时，即相当于调用了window.myFun()，即其作为window的属性被调用时this即指向window。
在浏览器中调试一下这段程序能更清楚的验证：
2.2 作为对象的方法
当函数作为对象的方法被调用时，其this即指向这个对象。以一开始的例子来说，其执行obj.getName()时，函数中的this即指向了obj这个对象。所以输出a。
但是当我们将这个函数单独分离开，把一开始的例子改变一下：
function myFun() {
console.log(this.name);
}var obj = {
name: 'a',
getName: myFun
};
obj.getName(); // avar obj2 = {
name: 'b',
fun: myFun
};
obj2.fun(); // b
从这个例子可以看出，this的指向完全取决于最靠近的成员引用，将函数绑定在哪个对象，哪个引用上，则this就有不同的指向。在上例中我们将带有this的函数分别绑定到了不同的对象上作为其方法，则其this对应着便绑定到不同的对象上，this.name的值便不同。
同理，当我们直接执行myFun()时，此函数即作为全局对象window的一个属性来调用。所以找不到myName属性，输出undefined。(因为全局对象window有默认属性name为空字符串，此处使用myName作为例子)
function myFun() {
console.log(this.myName);
}
myFun(); // undefined
最后，解释一开始的例子，将obj.getName赋值给了fn，所以，执行fn时即相当于执行了window.fn()，即这个一开始初始化为obj的属性的匿名函数被绑定到了window的fn属性上，所以其this指向window。
由window的name属性为空字符串，所以输出为空。
相关推荐：
以上就是实例解析Js中的this的详细内容，更多请关注其它相关文章！