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

Question

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

7

为什么这个可以运作...

<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函数时使用了括号。

我遇到的错误是：

通过VS2008编译时出现“htmlfile: 类型不匹配”。

- madcolor

5个回答

5

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的消息框。

- coobird

2

当您使用括号时，实际上是在调用该函数，并将函数结果（在此情况下为 undefined，因为 myAlert 没有返回值）作为参数发送。

- CMS

0

值得注意的是，函数是一等对象。您可以像处理其他对象一样处理它们。以下是一个简洁明了的例子，说明为什么这很酷，来自维基百科：

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

    return deriv;
}

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

- Tyson

0

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 方法所期望的方式。希望这有所帮助。

- Jonathan Fingland

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luca Matteis · Accepted Answer

函数后面的()表示执行该函数并返回其值。如果没有它，你只有这个函数，可以将其作为回调传递，这也是有用的。

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