this 可以说是 javascript 中最耐人寻味的一个特性，学习this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域。 this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。
为什么需要绑定this
this代指当前的上下文环境，在不经意间容易改变：
var info = "This is global info"; var obj = { info: 'This is local info', getInfo: getInfo } function getInfo() { console.log(this.info); } obj.getInfo() //This is local info getInfo() //This is global info 当前上下文环境被修改了
在上面的例子中，我们在对象内部创建一个属性getInfo，对全局作用域下的getInfo进行引用，而它的作用是打印当前上下文中info的值，当我们使用obj.getInfo进行调用时，它会打印出对象内部的info的值，此时this指向该对象。而当我们使用全局的函数时，它会打印全局环境下的info变量的值，此时this指向全局对象。
这个例子告诉我们：
1、同一个函数，调用的方式不同，this的指向就会不同，结果就会不同。
2、对象内部的属性的值为引用类型时，this的指向不会一直绑定在原对象上。
其次，还有不经意间this丢失的情况：
var info = "This is global info"; var obj = { info: 'This is local info', getInfo: function getInfo() { console.log(this.info); var getInfo2 = function getInfo2() { console.log(this.info); } getInfo2(); } } obj.getInfo(); //This is local info //This is global info
上面的例子中，对象obj中定义了一个getInfo方法，方法内定义了一个新的函数，也希望拿到最外层的该对象的info属性的值，但是事与愿违，函数内函数的this被错误的指向了window全局对象上面，这就导致了错误。
解决的方法也很简单，在最外层定义一个变量，存储当前词法作用域内的this指向的位置，根据变量作用域的关系，之后的函数内部还能访问这个变量，从而得到上层函数内部this的真正指向。
var info = "This is global info"; var obj = { info: 'This is local info', getInfo: function getInfo() { console.log(this.info); var self = this; //将外层this保存到变量中 var getInfo2 = function getInfo2() { console.log(self.info); //指向外层变量代表的this } getInfo2(); } } obj.getInfo(); //This is local info //This is local info
然而这样也会有一些问题，上面的self变量等于重新引用了obj对象，这样的话可能会在有些时候不经意间修改了整个对象，而且当需要取得多个环境下的this指向时，就需要声明多个变量，不利于管理。
有一些方法，可以在不声明类似于self这种变量的条件下，绑定当前环境下的上下文，确保编程内容的安全。
如何绑定this
1. call, apply
call和apply是定义在Function.prototype上的两个函数，他们的作用就是修正函数执行的上下文，也就是this的指向问题。
以call为例，上述anotherFun想要输出local thing就要这样修改：
... var anotherFun = obj.getInfo; anotherFun.call(obj) //This is local info
函数调用的参数：
Function.prototype.call(context [, argument1, argument2 ])
Function.prototype.apply(context [, [ arguments ] ])
从这里就可以看到，call和apply的第一参数是必须的，接受一个重新修正的上下文，第二个参数都是可选的，他们两个的区别在于，call从第二个参数开始，接受传入调用函数的值是一个一个单独出现的，而apply是接受一个数组传入。
function add(num1, num2, num3) { return num1 + num2 + num3; } add.call(null, 10, 20, 30); //60 add.apply(null, [10, 20, 30]); //60
当接受的context为undefined或null时，会自动修正为全局对象，上述例子中为window
2. 使用Function.prototype.bind进行绑定
ES5中在Function.prototype新增了bind方法，它接受一个需要绑定的上下文对象，并返回一个调用的函数的副本，同样的，它也可以在后面追加参数，实现函数的柯里化。
Function.prototype.bind(context[, argument1, argument2]) //函数柯里化部分 function add(num1 ,num2) { return num1 + num2; } var anotherFun = window.add.bind(window, 10); anotherFun(20); //30
同时，他返回一个函数的副本，并将函数永远的绑定在传入的上下文中。
... var anotherFun = obj.getInfo.bind(obj) anotherFun(); //This is local info
polyfill
polyfill是一种为了向下兼容的解决方案，在不支持ES5的老旧浏览器上，如何使用bind方法呢，就得需要使用旧的方法重写一个bind方法。
if (!Function.prototype.bind) { Function.prototype.bind = function (obj) { var self = this; return function () { self.call(obj); } } }
上面的写法实现了返回一个函数，并且将上下文修正为传入的参数，但是没有实现柯里化部分。