函数内必须用this吗？btn[i]为什么必须用 this啊？谁知道？ - javascript吧

level 3

88858886888 楼主

<body>
<div>
<button>btn one</button>
<button>btn two</button>
<button>33333</button>
</div>
<script>
var btn = document.querySelectorAll('button');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
// this.style.backgroundColor = 'blue';
btn[i].style.backgroundColor = 'blue';
}
}
</script>
</body>

2022年12月19日 10点12分 1

level 5

最喜欢大道理

你可以在你改颜色的函数里console.log(i),你就知道为什么了

2022年12月21日 02点12分 2

level 1

PlasticKernel

你打印个btn[i]和this，大概就知道他们指向啥了

2022年12月21日 03点12分 3

level 1

贴吧用户_G3E5S48

不用也可以把var换成let 或者闭包

2022年12月22日 06点12分 4

88858886888

thank you

2022年12月25日 10点12分

level 1

夜月姬织

没记错的话，如果这么做你无论点哪个按钮i都等于5，也就是只有最后一个按钮会变蓝 [吃瓜]

。
解决办法有三种，第一个是把btn[i]换成this，在事件处理函数中this必定指向的是触发事件的这个元素本身。第二个是在事件处理函数外面套上一个立即执行函数形成闭包，立即执行函数内部是一个完全独立的作用域，传进来的i都是独立的而不是作用域外的那个i。
(i=>{
btn[i].onclick=_=>{
btn[i].style [突然兴奋]

.backgroundColor='blue'
}
})(i)
大致就是这么写。第三个将var换成let，let对于作用域的要求更严格。let有一个"暂时性死区"的特点，let定义的变量会与当前作用域高度绑定，从而不会再受作用域外同名变量的影响。

2022年12月31日 01点12分 7

88858886888

2023年01月01日 02点01分

level 1

甘心替代你🐶

首先js this大概有10种左右指向吧，指向都很自然也不用刻意背，然后你思路是没错的，btn[i]和this指向本应该都是对应dom元素，可惜你不知道onclick是异步事件，var没变量作用域，等于你这个函数在for之外执行，i=3，btn[3]=undefined，新手很难理解吧，也不用纠结，实际工作我没遇见过这种需求，这甚至是js的一个bug，后来官方出了let来补救，搭配for使用能形成展示型死区，什么意思我也不知道，记住for let能准确将遍历值带进异步函数就对了，学js就对了，加油 [大拇指]

<body> <div> <button>btn one</button> <button>btn two</button> <button>33333</button> </div> <script> var btn = document.querySelectorAll('button'); for (let i = 0; i < btn.length; i++) { btn[i].onclick = function () { // this.style.backgroundColor = 'blue'; btn[i].style.backgroundColor = 'blue'; }; } </script></body>

2023年01月05日 16点01分 9

88858886888

thank you very much

2023年01月05日 16点01分

level 1

啼笑皆非ºº

1、for循环中的var产生的变量只有一个，把var = 1提出来单独声明和你的写法一个效果
2、for循环内中的函数中的i是个变量，而循环不是产生了一个替换i的固定值放在那儿，所以每次执行的时候都会读取i

2023年01月06日 07点01分 10

88858886888

2023年01月07日 00点01分