前言

了解this之前我们看看这篇文章:
[译]让我们一起解决“this”难题第一部分

真的看完之后无数次都啧啧称奇，老外的文章看得太爽了吧。这里我只截取部分我认为重要的知识来记录我对this的理解，部分表述有出入。

以下对this的理解，默认你已经了解一些JavaScript的背景知识，讲到global、window、this、prototype等等时，你知道它们是什么意思。虽然文章中默认所使用global和window，在这里是同一回事，可以互换。实际上我查了资料，其实是不一样的，简要说明一下：（不过不要过于纠结）

global： 全局对象global是在全局上下文中的变量对象，是一个不依赖宿主环境的对象，（注：常见的宿主环境：浏览器和nodejs）一切全局里存在的变量和函数都是它的属性和方法。global 不能直接被访问而是间接访问，访问其属性。如Math、String等等都可以看作是全局对象 global的属性，对global的属性的访问往往省略掉前缀，比如Math.abs(1)其实就是[[global]].Math.abs(1)

window：在‘usestrict’模式下，我们更强调window的全局对象的作用（除此之外，则常用global作为全局对象）。window对象是相对于Web浏览器而言的，它并不是ECMAScript规定的内置对象，它是浏览器的WebAPI，是存在于浏览器之中的，也就是离开浏览器这个宿主环境的话就不存在此对象了。所以，Global对象是包含于window对象这种情况的开始

一、this的第1条规则：默认绑定

默认绑定规则规定，当一个函数执行独立调用时，例如只是funcName();，这时函数的“this”被指向 global 对象。这里要注意的是，严格模式下，全局对象是不会默认绑定的，因此如果你在开启了严格模式，那么控制台输出的就是 undefined，而不再是全局变量。
先看下面这个代码：

//例子1
function foo() {
 function bar() {
  console.log(this); 
 } 
 bar();
}

foo();

foo 先被调用，然后又调用bar，bar将“this”打印到控制台中。这里的技巧是看看函数是如何被调用的：foo和bar都被单独调用，因此，他们内部的“this”都是指向 global 对象。但是由于 bar 是唯一执行打印的函数，所以我们看到 global 对象在控制台中输出了一次。

再看一下面的代码：

//例子2
var a = 1;

function foo() {  
 console.log(this.a);  
}

foo();
//1

输出结果是 undefined？是 1？还是什么？
如果你已经很好地理解了之前讲解的内容，那么你应该知道控制台输出的是“1”。为什么？首先，默认绑定作用于函数 foo。因此 foo 中的“this”指向 global 对象，并且 a 被声明为 global 变量，这就意味着 a 是 global 对象的属性（也称之为全局对象污染），因此this.a和var a就是同一个东西。

二、this的第2条规则：隐式绑定。

隐式绑定规则规定，当一个函数被作为一个对象方法被调用时，那么它内部的“this”应该指向这个对象。
先看下面这个代码：

//例子3
var obj = {  
 a: 1,   
 foo: function() {  
  console.log(this);   
 }  
};

obj.foo();

如果函数调用前面有多个对象（obj1.obj2.func()），那么函数之前的最后一个对象（obj3）会被绑定。

需要注意的一点是，函数调用必须有效，那也就是说当你调用obj.func()时，必须确保 func 是对象 obj 的属性。

因此，在上面的例子中调用obj.foo()时，“this”就指向 obj，因此 obj 被打印输出在控制台中。

三、进阶：默认绑定和隐性绑定两种规则结合

【重要】
我们必须知道，this在调用一个函数函数前，并没有绑定在这个函数，
判断运用了那种绑定规则，要密切注意这个函数是如何是否被单独调用。
如果单独调用的话，就是默认绑定，函数的“this”都指向全局对象global；如果是对象属性的调用，那么就是隐性绑定。

1、先看以下代码：

//例子4
function logThis() {  
 console.log(this);  
}

var myObject = {  
 a: 1,   
 logThis: logThis  
};

logThis();  
myObject.logThis();

跟在 myObject 后面的这个全局调用logThis()单独被调用的时候，通过 console.log(this)打印的是global对象；而myObject.logThis()，此时logThis()就是作为函数的属性进行调用的，打印是 myObject 对象。

2、一个有趣的现象：

console.log(logThis === myObject.logThis); // true

为什么不呢？它们当然是相同的函数，但是你可以看到如何调用_logThis_ 会让其中的“this”发生改变。当logThis被单独调用时，使用默认绑定规则，但是当 logThis 作为前面的对象属性被调用时，使用隐式绑定规则。

四、继续探讨this的运用

1、先看这个例子：

//例子5
function foo() {  
 var a = 2;  
 this.bar();  
}

function bar() {  
 console.log(this.a);  
}

foo();
//undefined

就像例子2 的 var a一样，bar也是全局对象的属性。因为foo被单独调用了，它内部的“this”就是全局对象(默认绑定)。因此 foo 内部的 this.bar 就是 bar。控制台中输出什么？如果你猜的没错，“undefined”会被打印出来。

注意 bar 是如何被调用的？看起来，隐式绑定在这里发挥作用。隐式绑定意味着 bar 中的“this”是其前面的对象引用。bar前面的对象引用是全局对象，在 foo 里面是全局对象，对不对？因此在 bar 中尝试访问 this.a等同于访问 [global object].a。而全局对象没有属性a，没有什么意外的话，控制台会输出 undefined。

2、再看一下下面例子：

//例子6
var obj = {  
 a: 1,   
 foo: function(fn) {  
  console.log(this);  
  fn();  
 }  
};

obj.foo(function() {  
 console.log(this);  
});

//{a: 1, foo: ƒ}
//window

是不是瞬间看不懂这个代码是什么呢？不要着急，把它简化一下吧，把
obj.foo(function() { console.log(this); });简化成 obj.foo();
这样看来，函数foo是接受一个回调函数作为参数。我们所做的就是在调用foo的时候在参数里面放了一个函数。
obj.foo( function() { console.log(this); } );
foo 是如何被调用的？它是一个单独调用吗？当然不是，因此第一个输出到控制台的是对象 obj 。我们传入的回调函数是什么？在 foo 内部，回调函数变为 fn 。那么 fn 是如何被调用？fn中的“this”是指向全局对象，因此第二个被输出到控制台的是全局对象。

3、看一个和构造函数相关的例子：

//例子7
var arr = [1, 2, 3, 4];

Array.prototype.myCustomFunc = function() {
 console.log(this);
};

arr.myCustomFunc();
//[1, 2, 3, 4]

是不是又傻眼了？如果对于原型不是很熟悉，就把它当做一个普通的对象，然后一个执行this的函数赋值给它，然后调用myCustomFunc时，就是调用这个函数对象，此刻发挥了隐性绑定的作用（我们始终不要忘记两种绑定规则的判定标准），此时函数内部的this就是指向myCustomFunc这个对象，arr调用之后，输出结果就是：[1, 2, 3, 4]

4、再看一下下面的例子：

//例子8

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

obj.foo();

var bar = obj.foo;  
bar();

不要被这里面的花哨代码所分心，只需注意函数是如何被调用的，就可以弄明白“this”的含义。你现在一定已经掌握这个技巧了吧。首先obj.foo()被调用，因为 foo 前面有一个对象引用，所以首先输出的是对象obj。bar当然是被独立调用的，因此下一个输出是全局变量。这里要注意的是，bar和foo是对同一个函数的引用，唯一区别是它们被调用的方式不同。

做到这里我已经够理解this（其实是时间不够）。其实还有几个例子，我全看完了，自己做了之后全对，希望看到这篇的你也能学会this的指向。

#JS续：3.0 this的前置了解