关于javascript的bind方法的疑问

按照我的理解，函数后面执行bind之后，函数里面的this就是bind方法传进入的bind了。

但是在和事件结合的时候就遇到了问题，代码：

window.addEventListener('click', function(event) {
    if (event.target.getAttribute('id') === 'testId') {
        // 这时候this是window，而不是document.getElementById("testId")   
    }

}.bind(document.getElementById("testId"))),

为什么这是this是window而不是testId呢，求解答。

阅读 3.9k

chrome执行的

<html>
<head>
</head>
<body>
<div id="testId" style="background-color:red;width:200px;height:200px"></div>

<script>
window.addEventListener('click', function(event) {
    if (event.target.getAttribute('id') === 'testId') {
        // 这时候this是window，而不是document.getElementById("testId")

        console.log( this === window ); // 输出 false
        console.log( this === document.getElementById("testId") );  // 输出 true        
    }

}.bind(document.getElementById("testId")));

</script>
</body>
</html>

所以，当前 this 就是 document.getElementById("testId")

补充一点：

<html>
<head>
</head>
<body>
<div id="testId" style="background-color:red;width:200px;height:200px"></div>

<script>
window.addEventListener('click', function(event) {
    if (event.target.getAttribute('id') === 'testId') {
        // 这时候this是window，而不是document.getElementById("testId")

        console.log("if");
        console.log( this === window ); // 输出 false
        console.log( this === document.getElementById("testId") );  // 输出 true        
    }else{
    
        console.log("else");
        console.log( this === window ); // 输出 false
        console.log( this === document.getElementById("testId") );  // 输出 true    
    
    }

}.bind(document.getElementById("testId")));

</script>
</body>
</html>

所以你不管是点击当前 div 还是直接点击页面任何地方，this 都是绑在 div 元素的 context的

关于javascript的bind方法的疑问

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？