Javascript中this绑定的3种方法与比较

介绍

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 infogetInfo() //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这种变量的条件下，绑定当前环境下的上下文，确保编程内容的安全。