javascript 语法：函数调用和使用括号

IT技术 javascript syntax
2021-03-18 03:09:09

为什么这有效..

<script type="text/javascript">
<!-- 

function myAlert(){
    alert('magic!!!');
}


if(document.addEventListener){   
    myForm.addEventListener('submit',myAlert,false); 
}else{   
    myForm.attachEvent('onsubmit',myAlert); 
}
// -->
</script>

但不是这个？？？

<script type="text/javascript">
<!-- 

function myAlert(){
    alert('magic!!!');
}


if(document.addEventListener){   
    myForm.addEventListener('submit',myAlert(),false); 
}else{   
    myForm.attachEvent('onsubmit',myAlert()); 
}
// -->
</script>

不同之处在于调用myAlert函数时使用括号。

我得到的错误..

“htmlfile：类型不匹配。” 通过 VS2008 编译时。

5个回答

函数后面的()表示执行函数本身并返回它的值。没有它，您只拥有该函数，该函数对于作为回调传递很有用。

var f1 = function() { return 1; }; // 'f1' holds the function itself, not the value '1'
var f2 = function() { return 1; }(); // 'f2' holds the value '1' because we're executing it with the parenthesis after the function definition

var a = f1(); // we are now executing the function 'f1' which return value will be assigned to 'a'
var b = f2(); // we are executing 'f2' which is the value 1. We can only execute functions so this won't work
呵呵。“函数（）{返回1；}（）；” 是语法错误，但“(function() {return 1;}())”不是。愚蠢的 JavaScript 和您单独的函数语句和表达式...
2021-05-02 03:09:09
@西蒙：“function() {return 1;}();” 仅当未分配给变量时才会出现语法错误。
2021-05-07 03:09:09

所述的addEventListener函数期望的功能或实现一个对象EventListener作为第二个参数，而不是函数调用。

当()被添加到函数名时，它是一个函数调用而不是函数本身。

编辑：如其他回复和评论中所示，可以在 Javascript 中返回函数。

因此，对于一些有趣的事情，我们可以尝试以下操作。从原来的myAlert，我们可以稍微改变它以返回不同的消息，具体取决于参数：

function myAlert(msg)
{
    return function()
    {
        alert("Message: " + msg);
    }
}

在这里，请注意该函数实际上返回了一个函数。因此，为了调用该函数，()将需要额外的。

我写了一点 HTML 和 Javascript 来使用上述功能。（请原谅我不干净的 HTML 和 Javascript，因为它不是我的域）：

<script type="text/javascript">

function myAlert(msg)
{
    return function()
    {
        alert("Message: " + msg);
    }
}

</script>

<html>
<body>

<form>
<input type="button" value="Button1" onclick="myAlert('Clicked Button1')()">
<input type="button" value="Button2" onclick="myAlert('Clicked Button2')()">
</form>

</body>
</html>

显示了两个按钮，每个按钮将调用myAlert具有不同参数的函数。一旦myAlert调用该函数，它本身将返回另一个函数，function因此必须使用一组额外的括号调用该函数。

最终结果是，单击Button1将显示一个带有消息的消息框Message: Clicked Button1，而单击Button2将显示一个消息框说Message: Clicked Button2。

当您使用括号时，您实际上是在调用函数，并将函数结果（在本例中未定义，因为 myAlert 没有返回值）作为参数发送。

还值得注意的是，函数是一流的对象。你可以像扔任何其他物体一样把它们扔来扔去。这是一个很好的简洁示例，说明为什么这很酷，来自Wikipedia：

function makeDerivative( f, deltaX ) {
    var deriv = function(x) { 
       return ( f(x + deltaX) - f(x) )/ deltaX;
    }

    return deriv;
}

var cos = makeDerivative( Math.sin, 0.000001);

if(document.addEventListener){   
    myForm.addEventListener('submit',myAlert(),false); 
}else{   
    myForm.attachEvent('onsubmit',myAlert()); 
}

myAlert()在这里使用是给出函数的返回值，而不是函数本身。

考虑一下：

function bob() {
    return "hello world";
}

alert(bob());

警报将使用函数返回的值bob。

如果你想在 addEventListener 中传递额外的参数，试试这个：

if(document.addEventListener){   
    myForm.addEventListener('submit',function(event) {
        myAlert(event,myOtherParamater); 
    },false); 
}else{   
    myForm.attachEvent('onsubmit',function () {
        myAlert(window.event,myOtherParameter); 
    }); 
}

javascript 使用一流的函数，因此可以作为参数传递给 addEventListener 和 attachEvent 方法所期望的函数。希望有帮助。

其它你可能感兴趣的问题
上一篇Blob 二进制数据存储在哪里？ 下一篇DataTables row.add 到特定索引