从一道前端笔试题分析javascript中this的使用陷阱

相信大家都有看过这样的一道javascript的面试题，具体如下：

var length = 10;
function fn(){
  console.log(this.length);
}
var obj = {
    length:5,
    method:function(fn){
      fn();
      arguments[0]();
    }
}
obj.method(fn,1);

这道题主要考察的是this的指向和arguments对象，第二个输出为2，这里我们不讨论这个话题。第一个输出的如果对this理解模糊的话容易答出5的答案，其实答案为10。

---

分析：javascript判断this绑定的判定规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，先思考如下代码：

function fn(){
  console.log(this.a);
}  
var obj = {
  a:2,
  fn:fn
}
obj.fn(); //2

首先需要注意的是fn()的声明方式，及其之后是如何被当作引用属性添加到obj中的。但是无论是直接在obj定义还是先定义再添加为引用属性，这个函数严格来说都不属于obj对象。
然而，调用位置会使用obj的上下文来引用函数，因此你可以说函数被调用时obj对象“拥有”或者“包含”它。
无论你如何称呼这个模式，但fn()被调用时，它的前面确实加上了对obj的引用。当函数引用有上下文对象时，函数调用中的this会绑定到这个上下文对象。因此调用fn()时this被绑定到obj，因此this.a和obj.a时一样的。

一种最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把this绑定到全局对象或者undefined上。

思考下面的代码：

function fn(){
  console.log(this.a);
}
var obj = {
  a:2,
  fn:fn
}
var bar = obj.fn; //函数别名
bar();//undefined

虽然bar是obj.fn的一个引用，但是实际上，它引用的是fn函数本身，因此此时的bar()其实是一个不带任何修饰的函数调用，因此为undefined。

回到之前的笔试题，参数传递其实就是一种隐式的赋值，下面的例子的参数传递和上面例子的 var bar = obj.fn其实是一样的。所以答案为10。

var length = 10;
function fn(){
  console.log(this.length);
}
var obj = {
    length:5,
    method:function(fn){//fn其实引用的是function fn()
      fn();//这里才是真正的调用位置
      arguments[0]();
    }
}
obj.method(fn,1);

那如果把函数传入到语言内置的函数而不是传入你自己声明的函数，会发生什么呢？结果是一样的，没有区别：

function fn(){
  console.log(this.a);
}  
var obj = {
  a:2,
  fn:fn
}
var a = "global";
setTimeout(obj.fn,100);

javascript环境中内置的setTimeout()函数的实现和下面的伪代码类似：

function setTimeout(fn,delay){
  //等待delay毫秒
  fn();//调用位置
}

就像我们看到的那样，回调函数丢失this绑定是很常见的。除此之外，还有一种情况this的行为出乎我们的意料：调用回调函数的函数可能会修改this。在一些流行的javascript框架中的事件处理器常会把回调函数的this强制绑定到触发事件的dom元素上。最后来一道测试题：

function fn(){
  console.log(this.a);
}
var a = 2;
var o = { a:3,fn:fn};
var p = { a:4}
o.fn();//输出？
(p.fn = o.fn)();//输出？

答案：3和2。

最后，分享下分析这种隐式绑定的原则：如果在一个对象内包含一个指向函数的属性，并通过这个属性间接引用函数，只有在这种情况下的this才会绑定到这个对象上。

作者：wengjq
链接：https://www.jianshu.com/p/cebb7243451d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。