The difference between the two functions? ("function x" vs "var x = function")

Возможный дубликат:
/questions/19317509/var-functionname-function-protiv-funktsii-functionname

В чем разница между:

function sum(x, y) {
  return x+y;
}

// and 

var sum = function (x, y) {
    return x+y;
}

Почему один используется поверх другого?

7 ответов

Решение

Первая известна как именованная функция, вторая - как анонимная функция.

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

var z = sum(2, 3);
function sum(x, y) {
    return x+y;
}

z назначается 5, тогда как это: -

var z = sum(2, 3);
var sum = function(x, y) {
    return x+y;
}

Сбой, так как в то время, когда в первой строке выполнилась переменная sum, функция еще не была назначена

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

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

Первый обычно используется по нескольким причинам:

  1. Имя "сумма" отображается в трассировке стека, что облегчает отладку во многих браузерах.
  2. Имя "сумма" можно использовать внутри тела функции, что облегчает его использование для рекурсивных функций.
  3. объявления функций "подняты" в javascript, поэтому в первом случае функция гарантированно будет определена ровно один раз.
  4. Причины вставки точек с запятой

    var f = function (x) { return 4; }
    
    (f)
    

    назначить 4 f,

Есть несколько предостережений, которые следует иметь в виду. Не делай

  var sum = function sum(x, y) { ... };

в IE 6, поскольку это приведет к созданию двух функциональных объектов. Особенно сбивает с толку, если вы делаете

  var sum = function mySym(x, y) { ... };

Согласно стандарту, функция sum(x, y) { ... } не может появляться внутри блока if или тела цикла, поэтому различные интерпретаторы будут обрабатывать

  if (0) {
    function foo() { return 1; }
  } else {
    function foo() { return 2; }
  }
  return foo();

по-другому. В этом случае вы должны сделать

  var foo;
  if (0) {
    foo = function () { return 1; }
  } ...

Первый из них является оператором именованной функции, а второй - назначает анонимное выражение функции переменной.

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

var y = sum(1, 2);

function sum(x, y) {
   return x + y;
}

Но выражение функции присваивается переменной только при выполнении кода, поэтому это не работает:

// Error here because the function hasn't been assigned to sum yet.
var y = sum(1, 2);

var sum = function(x, y) {
   return x + y;
}

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

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

var sum = function sum(x, y) {
   return x + y;
}

Но это может сбивать с толку, поскольку два имени на самом деле находятся в разных областях и относятся к разным вещам.

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

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

В первом варианте функция доступна для кода, который выполняется выше, где функция объявлена.

Это связано с тем, что во втором варианте функция присваивается переменной foo во время выполнения. В первом случае функция присваивается этому идентификатору foo во время разбора.

Больше технической информации

Javascript имеет три способа определения функций.

  1. Ваш первый пример - объявление функции. При этом используется оператор "function" для создания функции. Функция становится доступной во время анализа и может вызываться в любом месте этой области. Вы все еще можете сохранить его в переменной или свойстве объекта позже.
  2. Ваш второй фрагмент показывает выражение функции. Это включает использование оператора "function" для создания функции - результат этого оператора может быть сохранен в любой переменной или свойстве объекта. Таким образом, выражение функции является мощным. Выражение функции часто называют "анонимной функцией", потому что оно не должно иметь имени,
  3. Третий способ определения функции - это конструктор "Function()", который не показан в исходном посте. Не рекомендуется использовать это, так как он работает так же, как eval(), у которого есть свои проблемы.

Разница в том...

Это безымянная функция

var sum = function (x, y) {
    return x+y;
}

Так что если вы настороже (сумма); вы получаете "function (x, y) { return x + y; }" (безымянная) Пока это именованная функция:

function sum(x, y) {
        return x+y;
}

Если вы предупреждаете (сумма); теперь вы получаете "function sum(x, y) {return x + y;}" (имя равно sum)

Упоминание именованных функций помогает, если вы используете профилировщик, потому что профилировщик может сказать вам время выполнения функции sum... etcetera вместо времени выполнения неизвестных функций... etcetera

Вот еще один пример: функция sayHello(имя) { alert('hello' + name) }

теперь предположим, что вы хотите изменить событие onclick кнопки, например, "hello world"

Вы не можете написать:

yourBtn.onclik = sayHello('world'), потому что вы должны предоставить ссылку на функцию.

тогда вы можете использовать вторую форму: yourBtn.onclick = function () {sayHello('workld'); }

Ps: извините за мой плохой английский!

Они имеют в виду одно и то же. Это просто синтаксический сахар. Последнее является IMO более показательным, что на самом деле делает JavaScript; то есть "сумма" - это просто переменная, инициализированная функциональным объектом, который затем может быть заменен чем-то другим:

$ js
js> function sum(x,y) { return x+y; }
js> sum(1,2);
3
js> sum=3
3
js> sum(1,2);
typein:4: TypeError: sum is not a function
js> sum
3
Другие вопросы по тегам