this到底是是什么？

初学Javascript时这常常是困扰我们的。

也许我们知道this是存在于函数内部的一个对象，this 对象是在运行时基于函数的执行环境绑定的：在全局函数中，this 等于 window，而当函数被作为某个对象的方法调用时，this 等于那个对象。并且在全局环境定义的变量，会自动成为全局对象(window)的属性。 var a = 2; function fn(){ console.log(a); //2 console.log(this.a); //2 console.log(window.a); //2 console.log(this); //window } fn(); //fn处于全局环境中 console.log(this); //window

请看下面的代码：

function foo(num) { console.log( "foo: " + num ); // 记录 foo 被调用的次数 this.count++; //this指向window,相当于创建了一个全局变量 } foo.count = 0; //在函数对象内部添加了一个count属性 var i; for (i=0; i<10; i++) { if (i > 5) { foo( i ); } } // foo: 6 // foo: 7 // foo: 8 // foo: 9 // foo 被调用了多少次？ console.log( foo.count ); // 0 //摘自<<你不知道的javascript>> //由上面的两点可知结果为0也不足为奇了 接下来我们在看几段代码 var b = function(){ console.log(this); } var obj = { a:123; b:b; } obj.b(); //obj //当函数被作为某个对象的方法调用时，this 等于那个对象。 //但是通常this的使用是更为复杂的，那么这是我们要如何确定this呢？

再次理解this

在 <<你不知道的javascript>>一书中，详解了四种this的绑定规则。

当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。

默认绑定 function foo1() { console.log( this.a ); } var a = 2; foo1(); // 2 //因为foo()是不带任何修饰，而直接调用的，所以this默认指向window 隐式绑定

调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含.

function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; obj.foo(); // 2 //当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this 绑定到这个上下文对象 1. 还要注意，看下面代码 function foo1() { console.log( this.a ); } var obj2 = { a: 42, foo1: foo1 }; var obj1 = { a: 2, obj2: obj2 }; obj1.obj2.foo1(); // 42，this指向离他最近的引用对象obj2 obj2.foo1() //42,this指向obj2

当函数被作为对象的属性引用，而这个对象又作为其他对象的属性，那么对象属性引用链中只有最顶层或者说最后一层会影响调用位置——《你不知道的javascript》

2. 丢失隐式绑定的this function fn (){ console.log(this); } var obj ={ a:2; fn:fn; } obj.fn() //obj var vb =obj.fn vb(); //window //vb直接引用fn函数本身，并在全局中直接调用,并且this被重新绑定 //vb() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。 3. 当传入回调函数 function foo() { console.log( this ); } function Foo(fn) { // fn 其实引用的是 foo, fn(); // } var obj = { a: 2, foo: foo }; var a = 123; // a 是全局对象的属性 Foo( obj.foo ); //123 //相当于 /* function Foo(fn) { var fn = function(){ console.log( this ); } fn(); //window，等同于上面2的原理 } */ 4.setTimeout()定时器 function foo() { console.log( this ); } var obj = { a: 2, foo: foo }; var a = "oops, global"; setTimeout( obj.foo, 100 ); // "oops, global" //类似下面的代码 function setTimeout(fn,delay) { // 延迟delay 毫秒 fn(); //window } //等同于3的代码