Question

看到这样的代码：

index.html

<script type = "text/javascript"  src = "choices.js" ></script>
 <form id = "myForm"  action = "">
  <p>
    <label> <input type = "radio" name = "myChoice" value = "A" /> 
    A </label>
    <br />
    <label> <input type = "radio"  name = "myChoice" value = "B" />
    B </label>
    <br />
    <label> <input type = "radio"  name = "myChoice" value = "C"/> 
    C </label></form>
<script type = "text/javascript"  src = "choicesDom.js" ></script>

choices.js

function userChoice (choice) {
 var dom = document.getElementById("myForm");
 for (var index = 0; index < dom.myChoices.length; index++) {
    if (dom.myChoices[index].checked) {
        choice = dom.myChoices[index].value;
        break; 
    }
}

choicesDom.js

var dom = document.getElementById("myForm");
dom.elements[0].onclick = userChoice;
dom.elements[1].onclick = userChoice;
dom.elements[2].onclick = userChoice;`

问题是：为什么在choicesDom.js中userChoice像变量一样被调用？为什么不需要参数，为什么不需要userChoice()或userChoice(value)？尝试时，它显示为语法错误。

JavaScript函数的规则是什么？与其他编程语言的功能相比，它似乎使用得很宽松

Answer 1

这很简单。 Javascript函数是一等公民，这意味着您可以在更广泛的意义上像变量一样使用它们。在代码示例的最后一部分，已定义的函数“ userChoice”被分配给给定元素的每个onclick函数。

您所问的问题是错误的。在最后一部分中，该功能未触发。

简短示例说明如何以类似变量的方式使用函数（函数是一类对象）

无论您发布的代码应该完成什么，这都是一个已纠正的版本，其中删除了所有主要的语法错误：

// define some function
function someFunction(val){
  console.log(val);
}

// creates an object which has a reference to this function
var obj = someFunction;

// calls the function via obj
obj("Hi");

function userChoice (choice) {
 var dom = document.getElementsByName("myChoice");

 for (var index = 0; index < dom.length; index++) {
    if (dom[index].checked) {
        choice = dom[index].value;
        break; 
    }
  }
  console.log(choice);
}

var dom = document.getElementsByName("myChoice");
dom[0].onclick = userChoice;
dom[1].onclick = userChoice;
dom[2].onclick = userChoice;

Answer 2

在调用函数名称之后添加括号（带有或不带有参数）将调用该函数，而仅传递名称意味着我们不是在调用它而是将其用作变量。

在事件上设置处理程序时，您不想立即调用它，但是评估者告诉JavaScript事件发生时要调用哪个函数。您自然可以使用代表您的参数的变量名来执行此操作（不带括号，否则将执行该函数，而将使用该函数的返回值）

Answer 3

有问题的代码段不正确。应该是document.getElementsByName（“ myChoice”），而不是document.getElementById（“ myChoice”）;

dom.elements [0] .onclick = userChoice; 这不起作用，因为onclick提供事件而不是值。

我创建了一个代码沙箱，您可以在其中查看。当您单击“ A”时，MouseEvent登录到控制台，而不是值。当您单击“ B”时值记录在控制台中。 JS总是通过事件。 https://codesandbox.io/s/4jvon6l52x

调用带参数的函数和OnClick触发Javascript中不带参数的函数之间的区别？

3 个答案: