函数调用一般有以下三种情况：
1.fun(p1,p2)
2.obj.fun(p1,p2)
3.fun.apply(thisArg,[p1,p2])
第一种情况为直接调用一个函数，此时函数内部的this没有绑定，在非严格环境下默认为window。
第二种情况是将函数作为一个对象的方法进行调用的，此时this自动绑定到这个对象上去了。这种情况可以看做fun.apply(obj,[p1,p2])这种写法的语法糖。
第三种写法就是一个函数的正常调用写法了，需要显示指定函数的this指向。
func(p1, p2) 等价于
func.call(undefined, p1, p2) //非严格模式指向window
obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)
至此我们可以暂时下一个总结：在javaScript中，this指向调用时所在函数所绑定的对象（拗口）
让我们来看看下面几种经典的情况：
1.
var name = '小李'
var obj1 = {
name: '小明',
getName: function () {
console.log(this.name)
}
}
var getName = obj1.getName
obj1.getName()
getName()
结果如下：
image.png
这很好理解，第一种情况
obj1.getName()下，getName被当作对象的一个方法进行调用，此时会进行之前提到的自动绑定执行环境的步骤。至于第二种情况，先将
obj1.getName这个方法的引用赋值给getName，然后再直接调用getName，此时并没有为这次函数调用绑定执行环境，在非严格模式下，this默认指向window。
2.
var name = '小李'
var obj1 = {
name: '小明',
}
function getName() {
console.log(this.name)
}
obj1.getName = getName
obj1.getName()
getName()
image.png
可以发现输出结果是一样的，这就说明this的值只与函数从o的成员f中调用的方式有关系。，这也说明，函数在javascript中并没有什么特别的地方，只不过是一个地址的引用而已。this的指向是在函数被调用的时候指定的，而不是在定义时就指定好了的。
3.bind
因为this的这个特性，虽然使得函数变得非常灵活，但同时也使得this的指向无法事先确定。bind函数就是用来解决这个问题的。
var name = '小李'
function getName() {
console.log(this.name)
}
var obj1 = {
name: '小明',
}
var getObj1Name = getName.bind(obj1) //返回一个函数，该函数已经绑定了this
getName()
getObj1Name()
image.png
4.箭头函数
在箭头函数中，this是根据当前的词法作用域来决定的，就是说，箭头函数会继承外层函数调用的this绑定（无论this绑定到什么）。在全局作用域中，它会绑定到全局对象上。
看下面一个例子：
let fun1 = () => {
return this
}
console.log(fun1() === window)
let obj1 = {
fun1: fun1
}
console.log(obj1.fun1() === window)
image.png
在上面之中情况下，尽管
fun1是被当作对象的方法来调用的，等价于obj1.fun1.apply(obj1)，但是因为fun1是一个箭头函数，箭头函数的this不能被call，apply，bind所改变，所以此时，函数内部的this指向的还是函数定义时的this，即函数外层的window对象。再看下面一个比较奇怪的例子，这有助于我们深入理解this的指向问题。
// 创建一个含有bar方法的obj对象，bar返回一个函数，这个函数返回它自己的this，
// 这个返回的函数是以箭头函数创建的，所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，它反过来又设置返回函数的值。
var obj = {bar: function() {
var x = (() => this);
return x;
}
};
// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// x所指向的匿名函数赋值给fn。
var fn = obj.bar();
// 直接调用fn而不设置this，通常(即不使用箭头函数的情况)默认为全局对象，若在严格模式则为undefined
console.log(fn() === obj); // true
// 但是注意，如果你只是引用obj的方法，而没有调用它(this是在函数调用过程中设置的)
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true
在这个例子中，bar函数内部定义了一个箭头函数，这个箭头函数返回了一个this，而这个this很显然就是bar函数内部的this，但是bar函数的this也是事先不能确定的。
第一种情况，等价于fn=obj.bar.call(obj)，此时bar函数已经绑定到obj上面了，所以箭头函数中this指向的是obj。
第二种就很好理解了，此时bra函数的this绑定的是window，所以箭头函数内部的this也就是window了。
5.Event Handler中的this
btn.addEventListener('click' ,function handler(){
console.log(this) // 请问这里的 this 是什么
})
对dom事件稍微有点了解的人都知道，在这里的this指向的就是绑定事件的dom元素，那么有没有想过到底是为什么呢？
我们在前面已经了解到了，函数内部的this是由调用的时候所定义的，那么我们只要找到这个函数被调用时候的代码就可以清楚的知道this的指向了。但是这是属于浏览器的源代码，我们暂时还不能看到。
所以，你只能看文档了，MDN 这样说：
通常来说this的值是触发事件的元素的引用，这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。
当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。
由于浏览器知道你不方便看源码里是怎么 call handler 的，所以直接在文档里告诉你了，你可以假想浏览器的源码是这样写的：
// 当事件被触发时
handler.call(event.currentTarget, event)
// 那么 this 是什么不言而喻
这样就很清楚了。
看下面一个例子。
let book = {
author: 'John Resig',
init: function () {
document.onclick = e => {
alert(this.author);
}
}
};
book.init()
image.png
我们想像一下，当我们点击文档时，触发了绑定的onclick事件：
document.onclick.call(document)，但是因为这个事件方法是一个箭头函数，内部的this指向不会受call，apply，bind的影响，所以this指向的就是book这个对象了。
参考资料
this 的值到底是什么？一次说清楚
MDN
http://www.cnblogs.com/snandy/p/4773184.html
网友评论