对于那些没有投入时间学习this机制的前端来说，this的绑定一直是一件非常令人困惑的事。this是非常重要的，但是猜测，尝试并出错和盲目的从网上复制粘贴并不能让我们真正理解this的机制。
学习this的第一步是明白this既不指向自身也不指向函数的词法作用域，this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。
1.this与全局函数（默认绑定）
function test(){
console.log(this);
}
test(); // window
当调用test()时，因为应用了this的默认绑定，this.a被解析成全局变量a，this指向全局对象window。所以结果为1。
怎么知道应用了默认绑定呢？当前test()是直接使用不带任何修饰的函数引用进行调用的。这个简单来说就是没有任何前缀啊等东西，很纯粹！而其调用位置是全局作用域，更能确定除了默认绑定，无法应用其他规则了。
将上面改一下，使用严格模式会怎样？
function test(){
"use strict"
console.log(this);
}
test(); // undefined
虽然this的绑定规则完全取决于调用位置，但是只有test()运行在非严格模式下时，默认绑定才能绑定到全局对象；严格模式下与test()的调用位置无关；
2. this与对象中的方法（隐式绑定）
通俗地说就是一个函数，被当作引用属性添加到了一个对象中了，然后以 “对象名.函数名()” 形式进行调用，这时如果函数引用有上下文对象，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
function test(){
console.log(this.a);
}
var obj = {
a:3,
test:test
};
obj.test(); // 3
对象obj中包含两个属性a和test，其值分别是3和一个函数test()。
obj.test()表示函数引用时有上下文对象(也就是这里的obj)。
根据隐式绑定规则，会把test()中的this绑定到这个上下文对象，即this被绑定到obj，this.a===obj.a。
所以结果为3。
如果懂了，那么下面的例子也就会做了
function test(){
console.log(this.a);
}
var obj2 = {
a:4,
test: test
};
var obj1 = {
a:400,
obj2: obj2
}
obj1.obj2.test() // 4
看起来复杂了些，不过只要记住下面这个准则就可以了。
对象属性引用链中，只有上一层或者说最后一层在调用位置中起作用
2.1 隐式丢失
function foo(){
console.log(this.a);
}
var obj = {
a:5,
foo:foo
};
var bar = obj.foo; // 函数别名
var a = "global";
bar(); // "global"
虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
再看一个例子：
function foo(){
console.log(this.a);
}
function doFoo(fn){
fn();
}
var obj = {
a:5,
foo:foo
}
var a = "oops, global";
doFoo(obj.foo); // "oops, global"
其实和上面的没什么区别，只是这里把函数作为参数传递了，参数传递是一种隐式赋值。此时的this指向的是调用它的函数的对象即全局对象，因此应用了默认绑定。
如果把foo()函数传入语言内置的函数而不是传入自己声明的函数doFoo，又会怎样呢？
function foo() {
console.log(this.a);
}
var obj = {
a: 5,
foo: foo
};
var a = "oops, global"
setTimeout(obj.foo, 100); // "oops, global"
Javascript环境中内置的setTimeout()函数实现和下面的伪代码类似：
function setTimeout(fn, delay) {
// 等待delay毫秒
fn(); // <-- 调用位置
}
因此回调函数丢失this绑定是非常常见的，有时候调用回调函数的 函数还有可能会修改this。
3.this与apply,call,bind(显示绑定)
回顾一下隐式绑定，其关键是把函数当作引用属性添加到了对象中，通过这个属性间接引用这个函数，把this简介（隐式）绑定到这个对象上。
如果不想在对象内部包含函数引用，而想简单粗暴地在某个对象强制调用一个函数，这时就用到了函数的call()和apply()方法。
call和apply，以往我单纯理解为“控制this的指向”，现在才发现是原来是this绑定规则中的一种。
call和apply区别
apply接收的是数组参数，call接收的是连续参数。所以当传入的参数数目不确定时，多使用apply。
（tips:这里推荐个方法记忆apply和call各自接收的参数：apply为a开头，数组Array也是a开头，所以apply接收的是数组参数）
3.1 call
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 12
}
xw.say.call(xh, "实验小学", "六年级")
当调用say时强制把它的this绑定到xh上.
如果你传入了一个原始值（字符串类型，布尔类型或者数字类型）来当作this的绑定对象，这个原始值会被它的对象形式（也就是 new Strgin（...）、new Boolean(...)或者 new Number(...)）。这通常被称为“装箱”。
3.2 apply
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 12
}
xw.say.apply(xh,["实验小学","六年级"]);
3.3 bind
var xw = {
name : "小王",
gender : "男",
age : 24,
say : function(school,grade) {
alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
}
}
var xh = {
name : "小红",
gender : "女",
age : 12
}
xw.say.bind(xh)("实验小学","六年级");
这些例子也可以明显的看到call,apply,bind的区别。call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的。而bind返回的仍然是一个函数，所以是在调用的时候再进行传参。
3.4 显示绑定的变种-硬绑定
扯远了，前面说到隐式丢失的问题，显示绑定的一个变种可以解决这种问题。
回顾当初隐式丢失的第二个例子。
function foo(){
console.log(this.a);
}
function doFoo(fn){
fn();
}
var obj = {
a:5,
foo:foo
}
var a = "oops, global";
doFoo(obj.foo); // "oops, global"
将其修改成：
function foo(){
console.log(this.a);
}
function doFoo(fn){
fn.call(obj);
}
var obj = {
a:5,
foo:foo
}
var a = "oops, global";
doFoo(obj.foo); // 5
依旧是创建了doFoo()这个函数，但是在其内部手动调用了obj.foo.call(obj)，把foo()强制绑定到了obj对象，之后无论如何调用doFoo()，它总会手动在obj上调用foo.
再回顾隐式丢失的第一个例子
function foo(){
console.log(this.a);
}
var obj = {
a:5,
foo:foo
};
var bar = obj.foo; // 函数别名
var a = "global";
bar(); // "global"
将其改成：
function foo(){
console.log(this.a);
}
var obj = {
a:5,
foo:foo
};
var bar = obj.foo.bind(obj); // 函数别名
var a = "global";
bar(); // "5"
总结下“显示绑定三人组”
共同点：
1、都用于控制this指向；
2、第一个参数都是this需要指向的对象，也就是上下文；
3、都可以后续参数传递;
4、没有任何参数时，this都指向全局对象window >
区别：
1、call、apply绑定后立刻执行，bind是延迟执行。换言之，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，就使用bind()方法吧
4.this与new (new绑定)
使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作：
- 创建（或者说构造）一个全新的对象
- 这个新对象会被执行[[原型]]链接。
- 这个新对象会绑定到函数调用的this.
- 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
在这里主要关心第1，3，4步。
function Foo(a) {
this.a = a;
}
var bar = new Foo(2);
console.log(bar.a) // 2
使用new来调用Foo(...)时，会构造一个新对象并把它绑定到foo（...）调用中的this上，new是最后一种可以影响到函数调用时this绑定行为的方法，称之为new绑定。
以上四中规则根据优先级从高到低排序如下：
- 函数在 new 中调用，this绑定的是这个新对象
- 函数通过 call、apply或bind 调用，this绑定的是指定对象
- 函数在某上下文对象中调用，this绑定的是这个上下文对象
- 以上都不是，使用默认绑定。(在全局作用域调用，this绑定window对象)
关于this还有很多其他知识，例如this与箭头函数，this与定时器，有硬绑定自然也会有软绑定。以后再补充。
