функции и когда использовать скобки/скобки

Question

Я новичок в javascript и с трудом понимаю, почему и когда использовать скобки/скобки.

Если у вас есть кнопка называется зазывала, Вы можете написать ...

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

функция не () но ...

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

туРипсЫоп имеет никакого () или он не будет работать (появляется предупреждение, когда страница загружается, а не на клик).

Answer 1

туРипсЫоп не имеет()

О да, это делает:

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> 

Функция атрибут OnClick из HTML-тега включает круглые скобки, потому что браузер в основном оборачивать ваш вызов функции для вас. Это примерно соответствует приведенному ниже JavaScript.

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

Где функция() является объявлением анонимной функции.

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! 

Поэтому короткий ответ, как и другие отметили, что круглые скобки используются при объявлении функции и вызов функции, не проходя вокруг ссылки.