Синтаксис JavaScript: вызовы функций и использование скобок - PullRequest
Новая
       9

Синтаксис JavaScript: вызовы функций и использование скобок

7 голосов
/ 27 февраля 2009

почему это работает .. 

<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 ]

30 голосов
/ 27 февраля 2009

() после функции означает выполнить саму функцию и вернуть ее значение. Без этого у вас просто есть функция, которую можно использовать в качестве обратного вызова. 

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
5 голосов
/ 27 февраля 2009

Функция 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.

2 голосов
/ 27 февраля 2009

Когда вы используете круглые скобки, вы фактически вызываете функцию и отправляете результат функции (в данном случае неопределенный, поскольку myAlert не имеет возвращаемого значения) в качестве параметра.

0 голосов
/ 27 февраля 2009 
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 Надеюсь, это поможет.

0 голосов
/ 27 февраля 2009

Стоит также отметить, что функции являются первоклассными объектами. Вы можете бросить их вокруг, как и любой другой объект. Вот хороший краткий пример того, почему это круто, из 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...