前言
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来调用函数，会执行下面的操作：
- 创建(构造)一个新的对象
- 对这个对象进行原型链接
bar.__proto__ = foo.prototype(这不是重点) - 这个新对象会绑定到函数调用的
this,也就是this.a = a的this指向新对象 - 如果函数没有返回其他对象，那么就返回这个新对象
总的来说，使用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》
网友评论