摘要
上一篇文章中，引入了为什么使用this,以及this中常见的误区和解决方案。接下来我就关于this的使用以及规则说一下，希望对读友有帮助。
1 调用位置
在理解this的使用之前，先了解一个调用位置:函数在代码中调用的位置，这有助于我们理解this是指向谁。例子
function baz() {
console.log('baz');
bar();
}
function bar() {
console.log('bar');
foo();
}
function foo() {
console.log('foo');
debugger;
}
baz();
以上代码在浏览器中执行，我们可以通过浏览器的调试工具查看函数的调用顺序与this指向谁。这里效果图就不截取了。接下来就是this的规则。
2 绑定规则
2.2.1 默认规则
首先看一下代码来自《你不知道的JavaScript》中。
function foo() {
console.log(this);
console.log(this.a);
}
var a = 'hello';
foo();//this->window,this.a->hello
预期结果就是输出window，hello。函数在自身调用的时候，其this指向的是全局对象window，这样被称之为默认规则。但这条默认规则，在严格模式下又是不可取的，如下代码
function foo() {
"use strict";
console.log(this);
console.log(this.a);
}
var a = 'hello';
foo();//this->undefined,this.a->获取不到 undefined
在严格模式下的函数中，函数在自身调用的时候，this的指向为undefined。
但是，还有另外一种情况就是在严格模式下调用，依然会使用默认规则代码如下
function foo() {
console.log(this);
console.log(this.a);
}
var a = 'hello';
(function () {
'use strict';
foo();//this->window,this.a->hello
})();
2.2.2 隐式绑定
在隐式绑定中，可以理解为谁调用这个函数，this就指向谁。话不多说直接上代码
function foo() {
console.log(this.a);
}
var obj = {
a:2,
foo:foo
};
obj.foo();//2
通过代码来看 其实一点不难理解,obj调用了这个函数，自然的this就指向了obj这个对象。其实换句话说就是谁直接调用这个函数，this就指向谁。在上代码
function foo() {
console.log(this.a);
}
var obj2 = {
a:42,
foo:foo
};
var obj1 = {
a:2,
obj2:obj2
};
obj1.obj2.foo();//42
这段代码中，最终直接调用foo的是obj2，那么this.a就会获取obj2的a的值。
在隐式绑定中，会出现一个问题，就是this绑定丢失的问题。上代码
function foo() {
console.log(this.a);
}
var obj = {
a:2,
foo:foo
};
var bar = obj.foo;
var a = 'oops,global';
bar();//oops,global
我们预期的运行结果是this.a=2；但是实际结果是oops,global;在代码中虽然我们用bar引用了obj.foo这个属性，但实际上是引用了foo这个函数。因此最后调用bar()和调用foo()是一个道理,最后this指向了window。应用了默认绑定在非严格模式下的规则。
2.2.3 显式绑定
在隐式绑定中，我们是通过让函数绑定到对象中的某个属性来实现this的指向，这个容易造成this指向的丢失。为了解决这个问题，我们通过显式绑定的方式解决。在JavaScript中的函数中都有两个方法call与apply可以通过调用者两个方法强制改变this的指向。这种方式我们称之为显式绑定。
实例直接上代码
function foo(){
console.log( this.a );
}
var obj = {
a:2
};
foo.call(obj);//2
2.2.3.1 硬绑定
在显式绑定中的一种方式就是硬绑定，一旦绑定成功不会受调用他的对象影响。上代码
function foo() {
console.log( this.a );
}
var obj = {
a:2
};
var bar = function () {
foo.call(obj);
};
bar.call(window);//2
setTimeout(bar,100);//2
在这段代码中，我们看到了foo绑定了obj，让this指向了obj。在调用foo的函数中bar也改变了this的指向。但对于运行的预期结果没有影响。
2.2.3.2 API调用的"上下文"
在第三方库中的许多函数，以及JavaScript和宿主环境中的许多新的内置函数，都提供了一个可选的参数，来指定this。上代码
function foo(el) {
console.log(el,this.id);
}
var obj = {
id:"awesome"
};
//调用foo(...)时把this绑定到obj
[1,2,3].forEach(foo,obj);//1 "awesome" 2 "awesome" 3 "awesome"
类似的forEach内置的函数实际上是通过call和apply来实现绑定的。
2.2.4 new 绑定
在JavaScript中new操作符合其他语言的new有很大的区别。一个函数通过new 调用的时候，其实并不是真正的类的调用，这里模仿了java中类的调用，可以称之为虚拟类吧。JavaScript的new一次其实进行了很多操作这里就不赘述了。下面直接上代码，看看new是怎么绑定this的
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log(bar.a);//2
一句话，就是这么简单。bar引用了new调用的foo;那么this就绑定到了bar上。
总结
关于this部分，暂时讲解到这里，这里面可能或多或少讲解的也并不是那么透彻，但算是给自己做个小笔记以后方便自己查阅，哪里有不正确的地方还希望朋友们帮忙指正。
