理解JavaScript中的this

1、结论在前

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

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

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

要是以为理解了就能够不用看后面的文章了：）

2、经典栗子

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有这样的效果，那么咱们该怎么作呢？

3、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就是定义时所在的对象，而不是执行时所在的对象。

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