前言

this在JavaScript代码中几乎随处可见，同时，它也是JavaScript中相对复杂的机制之一。前端开发者在缺乏清晰认识的情况下，this完全就是一种魔法，难以捉摸。

全局代码中的this

在这里一切都是简单。在全局代码中，this始终指向全局对象本身。

// 显式定义全局对象的属性
this.a = 1;
console.log(a); // 1

// 隐式定义全局变量
// 全局变量都是全局对象的属性
b = 2;
console.log(this.b); // 2

// 显式定义全局变量
// 全局变量都是全局对象的属性
c = 3;
console.log(this.c); //3

函数代码中的this

1 误解

在函数代码中使用this是很有趣的，人们很容易把this理解成指向函数自身，其实并不是，让我们看看下面这段代码：

function foo(num) {
    console.log("foo: " + num);

    // 记录foo被调用的次数
    this.count++;
}

foo.count = 0;

for (var i = 1; i < 3; i++) {
    foo(i);
}
// foo: 1
// foo: 2

// foo被调用了多少次？
console.log(foo.count); // 0 -- WTF?

console.log语句确实输出了2次，但是foo.count仍然是0，显然从字面意思来理解this是错误的。
执行foo.count = 0时，确实向函数对象foo添加了一个属性count。但是函数内部中this.count的this并不是指向那个函数对象。那么，this到底是指向谁呢？

2 this到底是什么

this是在运行时进行绑定的，并不是编写时(定义时)绑定，它绑定规则取决于函数调用时的各种条件。

2.1 默认绑定

首先要介绍的是最常用的函数调用类型：独立函数调用，也就是直接函数名(参数)的调用方式。可以把这条规则看作是无法应用其他规则时的默认规则：

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

var a = 2;

foo(); // 2

你应该注意到，声明在全局作用域的变量var a = 2(也是全局对象的属性)在函数foo()调用时被打印出来了！由此我们得知，默认绑定中的this指向全局对象。

PS: 如果是在严格模式下，默认绑定会是undefined，而不是全局对象(不知道严格模式的可暂时忽略)

2.2 隐式绑定

当函数是作为某个对象的方法(其实都是属性)来调用时，则属于隐式绑定规则：

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

var a = 1;
var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 2

这里的函数foo是被引用到对象obj的属性中的，然后以对象.方法()来调用。此时我们可以看到this.a得到obj.a的值，可以得知this指向的是obj(由哪个对象调用则指向哪个对象)了
另外注意一个隐式丢失的问题：

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

var obj = { 
    a: 2,
    foo: foo 
};

var bar = obj.foo; // 函数别名！

var a = "oops, global"; // a是全局对象的属性

bar(); // "oops, global"

虽然bar是obj.foo的一个引用，但实际上，他们两个都只是引用foo函数本身，因此bar()只是一个默认绑定的调用！！
隐式丢失通常会在回调函数中见到，可以用下面说到的显示绑定解决！

2.3 显式绑定

当函数是通过call和apply方法进行调用的时候，我们称之为显示绑定：

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

var obj = {
    a: 2
};

foo.call(obj); // 2
foo.apply(obj); // 2

通过foo.call(obj)和foo.apply(obj)，我们就已经把foo中的this指向了obj

从this的绑定角度来说，call和apply是一样的，它们的区别体现在其他参数上，请自行查看api

另外ES5中提供了bind方法，该方法只是用来绑定函数的this指向，不会执行函数:

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

var obj = { 
    a: 2
};

var bar = foo.bind(obj);

bar(3); // 2 3 

我们可以看到foo.bind(obj)只是返回了一个绑定了this的函数，因此调用bar(3)时已经不是默认绑定了，我们也可以利用这个方法解决上面说到的隐式丢失问题：

// 隐式丢失原代码
    function foo() { 
        console.log(this.a);
    }

    var obj = { 
        a: 'obj',
        foo: foo
    };
    var a = 'global';

    setTimeout(obj.foo, 100); // "global"

// 用bind解决隐式丢失
    function foo() { 
        console.log(this.a);
    }

    var obj = { 
        a: 'obj',
        foo: foo
    };
    var a = 'global';

    setTimeout(obj.foo.bind(obj), 100); // "obj"

我们可以看到，原代码中把obj.foo作为回调参数传进setTimeout中，this的指向就丢失了，为什么呢？我们说过this是根据调用的方式来确定指向的，这里只是把函数引用传进去，还没有调用，内部调用的时候可能就是应用了默认绑定规则，然后this就指向了全局对象，setTimeout的伪代码如下：

function setTimeout (fn, delay) {
    // 等待delay毫秒
    fn(); // 调用回调函数，可以看到这里是独立调用函数
}

而我们把用了bind进行绑定返回的函数作为回调参数，就解决了this丢失指向的问题！

2.4 new绑定

这是最后一条绑定规则，使用new来调用构造函数时，就是new绑定规则：

function foo(a) { 
    this.a = a;
} 

var bar = new foo(2);

console.log( bar.a ); // 2

使用new来调用函数，会执行下面的操作：

1. 创建(构造)一个新的对象
2. 对这个对象进行原型链接bar.__proto__ = foo.prototype(这不是重点)
3. 这个新对象会绑定到函数调用的this,也就是this.a = a的this指向新对象
4. 如果函数没有返回其他对象，那么就返回这个新对象

总的来说，使用new来调用foo()时，函数中的this已经指向该函数创建的新对象了。

2.5 优先级

现在我们已经知道了函数调用中this绑定的四条规则，你需要做的就是找到函数调用的位置进行判断其应用了哪条规则，你就可以知道this的指向了。
但是，如果应用了多条规则，最终会哪个规则胜出呢？你们可以自行尝试……这里就不多做说明，直接给出答案。

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

2.6 ES6中的箭头函数

作为ES6中的新姿势，箭头函数的this是凌驾于以上规则之外的，是根据外层作用域来决定this:

function foo() {
    setTimeout(() => {
        // 这里的this在此法上继承自foo()
        console.log(this.a);
    }, 100);
}

var obj = {
    a: 2
};

foo.call(obj); // 2

我们通过显式绑定foo后，内部的箭头函数的this也继承了过来。其实这只是一个语法糖，只是用了一个私有变量来存储this，转换了一下代码：

function foo() {
    var self = this; // 定义了一个私有变量来存储foo的`this`
    setTimeout(function() {
        console.log(self.a);
    }, 100);
}

var obj = {
    a: 2
};

foo.call(obj); // 2

不过写法上来说还是挺帅气的~哈哈！

结语

总的来说，只要找到调用位置，分析其规则即可正确找到this。
第一次写博文，可能写的有点乱，请拿起砖头往死里拍……

知识吸取自《你不知道的JavaScript》