Question

在初学javascript中，我遇到了一个简单的程序，如下所示。我无法理解这个/那个代码在这里如何工作以及while循环如何在这里工作（我知道虽然循环有点但是！= - 1 部分让它混乱并且谷歌搜索我在它上面做的有点模糊）。任何帮助表示赞赏，如果有任何错误，请随时纠正。我可以理解下面的代码在做什么，但上面的查询仍然有点令人困惑 下面的简单代码正在运行。

代码：

var myImages = new Array("monkeyDluffy.png", "roronoaZoro.jpg", "sanji.jpg", "godUssop.png");

function changeImg(that) { //Can be named anything that is just professional
  var newImgNumber = Math.round(Math.random() * 3); //a simple random number generated
  while (that.src.indexOf(myImages[newImgNumber]) != -1) {
    newImgNumber = Math.round(Math.random() * 3);
  }
  that.src = myImages[newImgNumber];

  return false;
}
/*here use of this and that enables the code to perform better for a single object as*/

<html>

<head>
  <title>JS</title>

  <body>
    <img src="monkeyDluffy.png" onclick="return changeImg(this)" />
    <img src="roronoaZoro.jpg" onclick="return changeImg(this)" />
  </body>
</head>

</html>

Answer 1

<=>！= - 1部分令人困惑

查看the documentation for indexOf：

返回值

指定值第一次出现的索引; -1如果不是   找到。

所以它在找到指定值时循环。如果找不到，循环就会停止。

Answer 2

检查（！= -1）只是意味着，如果搜索到的值可以在源代码中找到（在这种情况下是数组），代码应该继续循环，也就是说，它应该运行代码体中的代码 while 循环。

您对 this / that 概念的补充：

这意味着当使用对象时要引用的当前上下文或上下文，这可能会让人感到困惑，因为JavaScript有匿名函数和调用其他函数的函数，导致上下文“丢失”或者确切地混淆了什么此关键字绑定或引用，但这是另一个主题。

在您的情况下，调用代码 return changeImg(this) 中所示的changeImg函数允许将 this 作为参数传递，这有助于设置单击当前元素（DOM元素）的上下文，以便您可以在Js代码中访问它。因此，您可以查看 this 的传递，以确保尽可能多地调用不同元素上的相同函数（changeImg），正确设置上下文。

使用那个，只是一种引用 this 的方式，我会假设，在教科书的某个地方，你从中提取代码，有一些东西可能看起来像是：var that = this;

Answer 3

＆＃39;这＆＃39;指的是img元素，＆＃39;＆＃39;是一个函数参数，所以＆＃39;那是＆＃39;指的是在那里传递的任何物体（恰好是与＆＃39;这个＆＃39;相同的物体。）

然后还有Quentin说的那些东西。

Answer 4

＆＃39;这＆＃39;在

上指定

<img src="monkeyDluffy.png" onclick="return changeImg(this)" />

将参考＆＃39; img＆＃39;你改变的元素＆＃39;功能：因此您可以直接访问＆＃34; src＆＃34;属性。
＆＃39;该＆＃39;只是方法参数，将引用＆＃39; this＆＃39;。

对于returnOf return方法，Quentin的答案很好！

简单的循环查询在Javascript中

4 个答案: