javascript - 功能以及何时使用方括号/圆括号

Question

我是 javascript 的新手，很难理解为什么/何时使用方括号/圆括号。

如果你有一个叫clicker的按钮，你可以写...

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

函数有()但是……

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

myFunction 没有 () 或它不会工作(使警报在页面加载时出现而不是在点击时出现)。

Answer 1

myFunction has no ()

哦，是的:

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")
}();

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