匿名回调函数中的this指向

Question

在平时对setTimeout addEventListener这种函数的使用，都会传入一个匿名的callback函数

如：

1.

window.setTimeout(function() {

    console.log(this)

}, 1000) 

或者

2.

var el = document.getElementById('wrapper')

el.addEventListener('click', function() {

    console.log(this)

}, false)

上述情况1中this会指向setTimeout函数的caller -> window对象

而情况2中this也会指向addEventListener函数的caller -> wrapper这个对象

但是我自己类似于window.setTimeout这样创建了一个对象

var a = {

    b: 'b in a',

    c: function (callback) {

        callback()

    }

}

//调用a对象的c函数，传入匿名函数作为参数

a.c(function() {

    //本以为this是指向a的，会输出字符串'b in a'，实际此时this指向window

    console.log(this.b) 

})

我原本以为会类似于window.setTimeout el.addEventListener那样，this会指向.(点号)之前的对象。

然后我改了一下对象a

var a = {

    b: 'b in a',

    c: function (callback) {

        callback.bind(this)()

    }

}

这个时候this才指向a。

那么问题来了： 

1.像这种匿名函数传参的用法，为什么使用我自己定义的对象和浏览器提供的api产生的效果不一样呢？这种类型的this的指向应该如何更好的理解？

2.是不是像setTimeout 、addEventListener这种系统api，它的内部实现就帮我们去把this bind给了调用这个方法的对象，如setTimeout中就有callback.bind(window)和addEventListener就有callback.bind(el)?

有没有各路大神可以解答一下，小弟感激不尽。

Answer 1

你可以把this当做function的一个隐藏参数，相当于function(_this, otherArgs){}事实上基本所有语言也都是这么处理的。所以当this不对的时候，可以用bind显性地传递这个参数。检查一个function是否绑定了this这个参数可以用下面的方法：// ES5function isBindable(func) {  return func.hasOwnProperty('prototype');}// ES6const isBindable = func => func.hasOwnProperty('prototype');事件监听那里可能是做了特殊处理，毕竟JS是个设计糟糕的语言（哈）

Answer 2

匿名函数的this默认都是指向window。对于元素事件监听的函数里面this指向元素自身，才属于是特殊情况。