为什么 this 不引用此代码中的当前变量

Question

 var colors = [ "rgb(25, 105,34)", "rgb(55, 165,94)", "rgb(20, 19,35)", "rgb(2, 10,3)", "rgb(09, 10,34)", "rgb(5, 10,34)" ]; var square = document.querySelectorAll(".square"); for (var i = 0; i < square.length; i++) { This.style.backgroundColor = colors[i]; }

for 循环中的This关键字应该直接引用我们的正方形 object 但显示未定义的错误 object 将其更改为square[i]的原因是什么？

Answer 1

this应该是小写，在这种情况下， this不是指square项目

默认情况下，执行的执行上下文是全局的——这意味着如果代码作为简单 function 调用的一部分被执行，那么this指的是全局 object。

window object 是浏览器的全局 object。 而在 NodeJS 环境中，一个名为global的特殊 object 将是 this 的值。

https://medium.com/better-programming/understanding-the-this-keyword-in-javascript-cb76d4c7c5e8

您需要使用square[i]访问项目

更新

正如@VLAZ 的评论中所述，为了不出现undefined的错误，您可以使用modulo运算符从数组中获取颜色

 var colors = [ "rgb(25, 105,34)", "rgb(55, 165,94)", "rgb(20, 19,35)", "rgb(2, 10,3)", "rgb(09, 10,34)", "rgb(5, 10,34)" ]; var squares = document.querySelectorAll(".square"); for (var i = 0; i < squares.length; i++) { squares[i].style.background = colors[i % colors.length] // ^^^^^^^ }

 .square{ width: 50px; height: 50px; margin-bottom: 15px; }

 <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div>