Question

我是javascript的新手，并且难以理解为何/何时使用括号/括号。

如果您有一个名为clicker的按钮，您可以写...

    document.getElementById("clicker").onclick=function(){
        alert("Hi")
    }

功能有（）但...

       function myFunction(){
        alert("Hi")
    }
    document.getElementById("clicker").onclick=myFunction;

myFunction没有（），或者它不会工作（当页面加载而不是点击时会显示警告。）

Answer 1

myFunction没有（）

哦是的确如此：

function myFunction(){
//                 ^^ right here
    alert("Hi")
}

通过使用函数定义替换变量，您可以轻松验证这两个示例是否相同：

function myFunction(){
    alert("Hi")
}
document.getElementById("clicker").onclick = myFunction;

// substitute "myFunction"

document.getElementById("clicker").onclick = function myFunction(){
    alert("Hi")
};

// remove function name 

document.getElementById("clicker").onclick = function(){
    alert("Hi")
};

看，我们没有触及任何()。我们能够通过简单地用变量替换变量将第二个例子转换成第一个例子。

您似乎在函数定义：

中混合了括号

function foo() { ... }
            ^^

用于调用函数的括号：

foo();
   ^^

这些是两种不同的括号，在你的例子中你都没有使用第二种（这是正确的）。

让我们看看如果我们使用myFunction()进行上述替换会发生什么：

function myFunction(){
    alert("Hi")
}
document.getElementById("clicker").onclick = myFunction();

// substitute "myFunction"

document.getElementById("clicker").onclick = function myFunction(){
    alert("Hi")
}();

// remove function name 

document.getElementById("clicker").onclick = function(){
    alert("Hi")
}();

注意最后一行中的悬空()？这看起来不像是你的第一个例子。所以你可以看到调用函数并不等同于定义函数。

Answer 2

myFunction()

当你在常规代码中使用myFunction（）时，它始终是一个执行函数的调用，括号可以包含一组函数参数的输入。

function myFunction()

在声明函数时，括号表示正在定义的参数列表。如果它们是空的，则意味着没有参数。

document.getElementById("clicker").onclick = myFunction;

当您设置元素的onclick属性时，它需要对函数的引用。这允许它在稍后触发实际的onclick事件时使用引用来执行该函数。如果你包括括号，它会尝试立即执行该函数，然后设置onclick到函数返回的结果。

<button id="clicker" onclick="myFunction()">Click Me!</button>

HTML标记的onclick属性中的函数包括括号，因为浏览器基本上是为您包装函数调用。它大致相当于下面的JavaScript。

document.getElementById("clicker").onclick = function(){ myFunction() };

其中function（）是匿名函数的声明。

Functions Eloquent JavaScript是一个可以帮助您更好地理解功能的参考。

Answer 3

在JavaScript中，函数是一等公民，简而言之，这意味着函数可以像常规变量一样运行。

考虑：

var x = 5; // x holds a reference to 5
foo(x); // Send whatever is inside x to foo, so it may do something with it.

同样，我们可以这样做：

// Again, x holds a reference to something
var x = function () {
    console.log("hello");
}
foo(x); // And again, we send that something into foo

在第二个示例中，x和function () {...}是相同的。写一个与写另一个相同，就像第一个例子中的x“真的是”数字5，第二个例子中的x“真的是”函数。

现在，当我们想要运行一个函数时，我们使用引用+括号来调用它。考虑这些例子，它们都是一样的：

// foo is the reference to the function, just like x was. 
// and we call it with parenthesis:
function foo () 
{
    console.log("Hello");
}
foo(); // Logs "hello".

// reference to function (still foo) + parenthesis
var foo = function () 
{
    console.log("Hello");
}
foo(); // Logs "Hello"

// Now: A function is called by a reference to a function followed by parenthesis
// So, we can also do this rather nifty thing:
function foo () 
{
    console.log("Hello");
}()
// A reference to a function, followed by parenthesis!

所以简短的回答，正如其他人所指出的那样，在声明函数和调用函数时使用括号，而不是在传递引用时。

函数以及何时使用括号/括号

3 个答案: