理解JavaScript中的this

一、结论在前

javascript中的this是一个老生常谈的话题，但不知道是之前那些作者没讲清楚还是我太笨没能理解，始终没能真正理解它，随着自己在项目过程中的大量实践，终于对this比较理解，这里作个总结，也与大家分享一下。

别的文章一来就举例子，我这里首先告诉大家一个结论：

this指向的是调用函数的那个对象。

要是觉得理解了就可以不用看后面的文章了：）

二、经典栗子

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return this.name
    }
};
alert(object.getName());

这是一个所有讲this都会使用的简单而又经典的例子，我们根据一开始的结论----this指向的是调用函数的那个对象，很容易就知道输出结果是My Object，接下来我们将这个经典例子升级。

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return function () {
            return this.name
        }

    }
};
alert(object.getName()());

请告诉我输出结果是什么。

许多人会说还是My Object，那么你就进入陷阱了。其实这也是JS新手常有的误区，他们总简单地以为this指向this所在的对象，这是错误的！一定要牢记结论this指向的是调用函数的那个对象，这个重要的结论我终于说满三遍。那么我们再来分析上面的代码：

首先我们创建了一个全局变量name，为它赋值"The Window"；接下来我们创建了对象object，它有个属性name，属性值"My Object"，这个对象还包含一个方法getName()，而这个方法会返回一个匿名函数，而匿名函数又返回this.name。

逻辑理清后，我来告诉大家陷阱在哪：

匿名函数执行具有全局性，其this对象通常会指向window

说"通常"就是说有例外，在通过call()或apply()改变函数执行环境的情况下，this就会指向其他对象了，这些函数我之后会讲到，这里不做展开。

ok，我们知道了这个陷阱，但这也只是个没用的知识点，有用的是怎么解决这种尴尬的情况。虽然我之前说很多新手会犯总简单地以为this指向this所在的对象这样的错误，但是我们在实际开发中就是想让this有这样的效果，那么我们该怎么做呢？

三、this的绑定

1.var _this=this

这是最基础的绑定this的方式，将this赋值给一个变量，这个变量可以取任何名字，我喜欢取名_this,有些人喜欢取名that，我们再回顾之前升级的例子：

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        var _this=this
        return function () {
            return _this.name
        }

    }
};
alert(object.getName()());

2.bind()

稍微高级点的方法是使用bind()函数，这是一个ECMAScript 5.1出来的扩展方法，与call()、apply()是"同期生"，他们的关系和差别之后我会专门谈。这里依然是之前的例子：

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return function () {
            return this.name
        }.bind(this)
    }
};
alert(object.getName()());

3.ES6中的()=>

()=>俗称箭头函数，使用它来定义匿名函数，同样可以解决this的绑定问题

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        return ()=> {
            return this.name
        }
    }
};
alert(object.getName()());

这是由于()=>函数体内的this就是定义时所在的对象，而不是执行时所在的对象。

以上，想到再补充吧...