JavaScript 之 this 的默认绑定规则

[felix-cao]

一、全局环境中

this 默认绑定到 window

console.log(this === window); // true

二、函数独立调用时

this 默认绑定到 window

function foo(){
    console.log(this === window);
}
foo(); // true

三、被嵌套的函数独立调用时

this 默认绑定到 window

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

上面代码中，虽然 test() 函数被嵌套在 obj.foo() 函数中，但 test() 函数是独立调用，而不是方法调用。所以 this 默认绑定到 window

四、IIFE立即执行函数

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

上面的代码等价于

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

五、闭包

类似地，test() 函数是独立调用，而不是方法调用，所以 this 默认绑定到 window

var a = 0;
function foo(){
  function test(){
    console.log(this.a);
  }
  return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()(); // 0

由于闭包的 this 默认绑定到 window 对象，但又常常需要访问嵌套函数的 this，所以常常在嵌套函数中使用 var that = this，然后在闭包中使用 that 替代 this，使用作用域查找的方法来找到嵌套函数的 this 值

var a = 0;
function foo(){
  var that = this;
  function test(){
    console.log(that.a);
  }
  return test;
};
var obj = {
  a : 2,
  foo:foo
}
obj.foo()(); // 2