yezheyu

关于 button 的点击事件的回调函数 this 为啥是 button

我猜是这样的的，你们看对吗？

当页面上一个点击事件触发时，页面上如果有多个元素绑定了点击事件，那总不能把所有的点击事件都触发了，为了精准触发某个按钮的点击事件，所以区别于一般的任务，其多保存了一个回调函数的绑定对象，大概结构类似下面

{
btn1:{
showText1: func(){…},
showText2: func(){…}
}
}

所以回调函数调用时是这样 btn1.showText()调用，走的隐式绑定，所以 this 指向 btn1

@biguokang
@autoxbc
@Al0rid4l

@biguokang
@autoxbc
@Al0rid4l
@h0099

还有个问题想请教大家

---------------------------------------------------------
setTimeout( function(){ console.log(this), 0 } )
// 打印 window
--------------------------------------------------------

异步任务的回调函数中的 this 大多数是指向 window ，因为回调函数作为任务执行时，主线程的执行栈已清空，函数是单独调用，其默认绑定的就是 window

我这样理解对吗？

那为啥 button 点击事件的回调函数中 this 会指向事件的触发对象 button 呢？而不是 window ？

@biguokang #30
老哥你这一说，我也觉得像，哈哈

@biguokang
@h0099

多谢老哥的详细解答，那再请教一个类似的问题。

对于 JavaScript 中事件绑定和触发，同样涉及到事件循环，我这样理解对吗？



当你为一个事件绑定一个回调函数 ( 事件触发后执行的一段代码，可以是绑定多个回调函数 )时，本质是使用一个容器 ( 如对象 ) 记录事件名和回调函数的映射

当浏览器监控到特定的事件被触发时，就会从容器中取出事件对应的回调函数，把事件对象作为参数传递进回调函数中，再封装成一个任务放入任务队列中等待主线程执行

@h0099
多谢指正

所以 xhr 只是负责和浏览器的网络线程通信，下发任务
而网络线程就只管从服务器下载资源，对于下载好的资源，你怎么处理，就算只是打印一下，也必须让主线程处理。网络线程只负责 socket 通信。

所以我上面的例子，对于结果不管是更新 UI ，还是打印结果，都只能是主线程处理，对吗？

@cyndihuifei @peterlitszo

个人理解，可能有错，欢迎指出



js 之所以是单线程，主要为了避免资源竞争问题。

但实际上 js 不可能是单线程，就比如 xhr 图片加载，xhr 在下载时没有阻塞主线程，那图片的下载必定不是在主线程执行，那必定有一个线程帮你执行下载工作，就是网络线程。

所以我认为 js 单线程是指你在 js 代码中无法像其它语言那样使用多线程模块创建一个线程执行一个代码块。只能使用预留的 API 调用现有的线程，如浏览器的 xhr Web Api ，node 的 fs 模块

那像 xhr 中在网络线程中要渲染图片，涉及到操作 dom ，就会出现资源竞争问题，所以必须放到任务队列中让主线程来进行



那你在代码中的耗时任务该怎么办呢？ js 又没有多线程让你开辟一个线程去处理，而浏览器也没有一个特定的 WEB API 帮你执行。

所以为了不阻塞后续代码只能延期执行，让其它代码先执行，执行完后再执行耗时任务和对其结果的依赖代码，即微任务。

每个宏任务都有一个微任务队列，里面放的就是这些延期代码。微任务的执行时机就是当前宏任务执行完，下一个宏任务执行前。这样就可以完美解决。

而 Promise 就是这样的实现

@Mutoo 多谢老哥，明白了

@elonmask 有道理，但如果不是 UI 相关，收尾代码纯粹 console.log 或者保存图片等等，另一个线程也能做到，是不是就没必要放到任务队列中等主线程执行呢？

@Great233

再次感谢老哥，最近重新看了 Object 上 Object.getOwnPropertyDescriptors() API ，其中提到了属性的是否可枚举，我才算彻底明白这个问题，也明白了是我当初这个问题问歪了，哈哈