2013-11-19 5 views
0

Im новичок в JavaScript, и пытается понять, как работает анонимная функция,анонимная функция Javascript

Когда я запускаю страницу ниже, я получаю окно предупреждения «летать на солнце». Не уверен, почему это получить срабатывает

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
     </script> 

     <script> 
      function flytothemoon() 
      { 
      alert("Zoom") 
      } 

      var flytothesun = function(){ 
      alert("Fly to the Sun");  
      } 
      flytothesun(); 
     </script> 
    </head> 
    <body> 
     <input type="submit" onclick=flytothesun()> 
    </body> 
</html> 
+3

Там нет анонимной функции здесь. Вы определили именованную функцию, а также вызвали ее! – adarshr

+0

Линия 'flytothesun();' очень выделяется ... –

+1

... ну что бы вы ожидали? – Doorknob

ответ

0

Вот объяснение:

var flytothesun = function(){ 
    alert("Fly to the Sun");  
} 

Выше функция от того, где вы получаете предупреждение.

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

flytothesun(); 

Вышеуказанный код означает вызов функции при загрузке страницы. И благодаря этому вы получаете сообщение Летите на солнце во время загрузки страницы.

1

Если вы пытаетесь OnClick, то вы забыли дать двойные кавычки функции и впадина предоставить какое-либо значение для него (Попробуйте ниже HTML код):

<input type="submit" onclick="flytothesun()" value="click" /> 
2
function flytothemoon() { // definition of flytothemoon 
    alert("Zoom") 
} 

var flytothesun = function(){ // definition of flytothesun 
    alert("Fly to the Sun");  
} 
flytothesun(); // invocation of flytothesun 

<input type="submit" onclick=flytothesun()> // handler 

Я аннотированный код с 4 комментариями :

  1. Определение flytothemoon. В этом разделе определяется функция, которая может использоваться везде, где есть ваш код (даже в строках, прежде чем вы определили его).

  2. Определение flytothesun. Этот раздел определяет переменную, которая ссылается на анонимную функцию. Вы можете использовать эту переменную для вызова функции, но только после того, как строки, которые ее определяют, выполняются.

  3. Вызов метода flytothesun. Используя ссылку в 2, вы вызывали функцию. Это когда появляется предупреждение.

  4. Добавлена ​​функция в качестве обработчика. Ваш синтаксис здесь неправильный. Он должен быть onclick="flytothesun()". Это также вызовет функцию, но только тогда, когда событие щелчка запускается в поле ввода (когда вы нажимаете кнопку мыши над вводом).

1

Если вы еще не сделали, я настоятельно предлагаю читать удивительную статью Named function expressions demystified, из которого я собираюсь процитировать через ответ.

Одним из двух наиболее распространенных способов создания функционального объекта в ECMAScript является либо выражение Function, либо Function Declaration. Разница между двумя довольно запутанна. По крайней мере, это было для меня.Единственное ECMA спецификации ясно, что функция Декларация должна всегда иметь идентификатор (или имя функции, если вы предпочитаете), и функция Выражение может опустить его:

FunctionDeclaration:
функция Identifier (опц) {FunctionBody }

ВыражениеФункции:
функции Идентификатор опц (опц) {} FunctionBody

Ваша первая функция получила объявлена, используя объявление функции

function flytothemoon() { 
    alert("Zoom") 
} 

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

Итак, ничего особенного. Обычно объявленная функция, которая может быть вызвана, с использованием идентификатора функций flytothemoon, за которым следуют парсеры ().

Ваша вторая функция немного отличается, как таковая, что она является выражением функции.

Мы можем видеть, что когда идентификатор опущен, это «что-то» может быть только выражением.

Что происходит во втором случае?

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

var flytothesun = function(){ 
     alert("Fly to the Sun");  
     } 
  1. Новая переменная flytothesun получает объявлена.
  2. Затем вычисляется выражение, инициализирующее переменную.
    1. Результатом выражения является ссылкой на анонимные функции
    2. Это задание, а затем получает назначение в вашей переменной flytothesun

Помните, что функции которые вызываются круглые скобки ()?. Ничто не происходит в строке

flytothesun(); 

Вы просто вызов функции, которые ваша переменная flytothesun ссылки.


Как уже упоминалось в комментариях, вы также можете назвать функциональные выражения, назначение и преимущества которых хорошо описаны в статье.
Если вы заинтересованы, читать;)

Как это не напрямую обратиться точкой в ​​этом вопросе, я добавлю два минимальных (возможно, не то, что практические) примеров, только.

  • 1. Рекурсия. Ссылка на функцию доступна через ее идентификатор внутри функции.

var sixthParent = (function parent (el,n) { return n?parent (el.parentElement,--n):el})(someChildElement,6);

Как вы видите, мы можем использовать именованные функции выражения, используя идентификатор, чтобы получить наши элементы, родителю рекурсивно

var results = []; 
someAjaxReqeust (function callback (response) { 
        results.push (response.data); 
        if (response.has_more) { 
         someAjaxRequest (callback); 
        } else { 
         console.log (results); 
        } 
       }); 

В данном случае используется идентификатор чтобы передать функции обратного вызова ссылке на наш ajaxhandler, чтобы сделать успешный вызов ajax, если ответ указывает, что есть больше данных.

  • 2. Отладка. Опциональный идентификатор выражения функций будет включен в stacktrace в случае ошибок, что помогает нам в отладке. Без имени мы получим <anonymous>

например
try { 
    (function debug() { 
     throw new Error("dummy") 
    })() 
} catch (e) { 
    console.log(e.stack) 
} 
/* 
Error: dummy 
    at debug (<anonymous>:4:15) 
    at <anonymous>:5:7 
    at Object.InjectedScript._evaluateOn (<anonymous>:581:39) 
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:540:52) 
    at Object.InjectedScript.evaluate (<anonymous>:459:21) 
/* 
+0

Вы упомянули, что для выражения функции вы можете * пропустить идентификатор, что заставляет меня думать, что вы также можете его предоставить. Как таковой '' var foo = function bar() {}; '' совершенно законный код. Однако, делает ли идентификатор * любой * разницей в этом случае? Вызов '' moo() ;; '' возможен, но '' bar'' остается неопределенным в пределах области, в которой он был объявлен. – Kippie

+0

@ Kippie Это действительно возможно и особенно полезно, когда дело доходит до отладки. Хотя это может быть помощь для рекурсивных функций, а также для вызова аякс-запросов. например вы можете дать обратный вызов для ajax-запроса имени и сделать последовательные запросы из этого обратного вызова, передав ссылку исходного обратного вызова через свой идентификатор. Я добавил два минимальных примера ответа – C5H8NNaO4

+0

Спасибо, очень ясно мне сейчас :) – Kippie

Смежные вопросы