Различие между функциями язык сценариев JavaScript

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

function EjemploUno(){
    // código
}

Это - то, что известно как определение функции и используется, чтобы объявлять функцию и распределять ее ему в идентификатора или переменную EjemploUno. Я видел также, как термин заявление функции использует, чтобы относиться к ней.

Заметь: Эта структура не требует использования одного ; в конце Вашего заявления.

Следствиями от объявления функций этой формы дело в том, что переводчик Javascript, когда он встречается с чем-то поскольку это, делает hoisting с переменной и включает тело функции. Пример этого ты можешь подтверждать это в следующем фрагменте кода.

alert(Ejemplo1);
alert(Ejemplo2);

console.log(Ejemplo1);
console.log(Ejemplo2);

function Ejemplo1() {
   // Cuerpo de la función Ejemplo1
}

var Ejemplo2 = function() {
   // Cuerpo de la función Ejemplo2
};

Первая инструкция alert он ссылается на переменную, которая признана 6 линиями кода внизу однако, показывает тебе контент функции (alert внутри он использует toString (), чтобы показывать объект, который хотят представить) однако второй alert образец undefined то, что происходит, потому что идентификатор объявлен, но ему не была распределена никакая стоимость. Ассигнование только происходит 9 линий кода внизу, когда работает инструкция Ejemplo2 = function()

Этот второй случай - то, что известно как Выражение функции, которая может быть анонимной или нет. Обе формы ТРЕБУЮТ использования одного ; чтобы отделять их от предстоящей инструкции. Пример:

var Ejemplo2 = function() {
     // Expresión de función que asigna una función sin nombre o anónima
     // a una variable Ejemplo2
};

var Ejemplo2 = function MyFunc() {
    // Expresión de función que asigna una función llamada MyFunc a
    // la variable Ejemplo2
};

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

В случае выражения функции с именем возможно делать что-то как это:

var Ejemplo3;
var Ejemplo2 = function MyFunc() {
    Ejemplo3 = MyFunc;
    // La referencia MyFunc sólo existe dentro del cuerpo de la propia función
};

// var Ejemplo4 = MyFunc ----- lanza un error de referencia MyFunc is not defined

Идентификатор MyFunc может сохранять и ты можешь продолжать снабжать ссылками в функцию даже если в Ejemplo2 распределите его ему в другую стоимость. Это оказывается очень практическим, чтобы ссылаться на функцию, если сама; например для deregistrar события, если сами, поскольку он появляется во фрагменте следующего кода:

var button = $('#testButton');
button.on('click', function clickHandler() {
  alert('Haz hecho click en el botón');
  
  button.off('click', clickHandler);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="testButton">Al hacer click el boton se desactivará!</button>

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

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

var Ejemplo = function recursivo(arg) {
  if (arg < 10) {
    console.log('iteración ' + arg);
    recursivo(arg + 1);
  }
};

Ejemplo(2);

ОБНОВЛЕНИЕ

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

// código ilegal
(function() {
    'use strict';


     if (true) {
         // bloque de la instrucción if
         function b() {
             // esto funciona en algunos entornos pero de acuerdo al estándard 
             // no es código legal
             // lo recomendado es que uses una expresión de función en casos como este
         }
         b();
     }     

} ());

// aceptado por el estándard
(function() {
    'use strict';

     function b() {
       // ahora la función se encuentra declarada en el bloque de la función 
       // o bloque de nivel superior
     }  

     if (true) { 
         b();
     }     

} ());

Предыдущий код не производит ошибки в каких-то средах, но разум этого состоит из-за расширения в том, что делают браузеры estandard ECMA-262, который определяет, что заявления функций не могут быть использованными везде, ограничение, которое не применяется к Выражениям функции. Это соединение (на английском) имеет информацию о мотивах теми, которые estándard делает сходное утверждение.

ОБНОВЛЕНИЕ 2

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

if (true) {
   function Ejemplo1() {}

   function Ejemplo2() {}

   Ejemplo1();
}
Ejemplo2() // Reference error Ejemplo2 is not defined

Это что-то, что еще находится в процессе осуществления, но рекомендуемое состоит в том, чтобы ты не написал код, который мог бы считаться незаконным для того, чтобы то, что писцы может выживать лучше будущие изменения, которые может испытывать язык, поэтому важно, чтобы ты узнал различия между двумя структурами.

Твой вопрос может сводиться к, что полностью различные с точки зрения языка (даже в spec они являются разделенными http://es5.github.io/#x12.4 и http://es5.github.io/#x13) имея как сходство, которое оба могут использовать, чтобы объявлять функции.

Здесь

язык сценариев JavaScript Функтион Дефинитионс

объясняет себе, что ты выдвигаешь

• она первый, форму определяет функцию
• вторая в действительности - функция anГіnima, который ты распределяешь в переменную

, Когда ты определяешь

var x = function() { ...

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

- то же самое, когда ты делаешь что-то как это

function Metodo1(callBack){
   callBack();
}

Metodo1(function() {

    alert('mensaje');

});

в этом случае, ты перемещаешь из-за параметра функцию anГіnima.

Известные функции: именно те функции получают имя в Вашем заявлении.

function foo(){};

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

var foo = function(){};
var bar = function other(){};

console.log(foo.name); // foo
console.log(bar.name); // other

Различия:

• Скорость: нет.
• Контекст: (this) он отличный, зависит, откуда она выполнена.

Пример:

function foo() {
    console.log(this);
};

var anFn = function(){
    console.log(this);
};

var bar = {
    foo: anFn
};

Результаты выполнения были бы:

foo(); // Window
bar.foo(); // Object
anFn(); // Window

Анонимные функции обычно использованы:

1. Внутри буквальных объектов (методов).
2. Новые функции, добавленные в prototype.
3. Как автовыполнимые функции (с целью поддерживать отдельное достижение).

Полезный пример (анонимная функция)

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

Мы смогли бы делать легко что-то вроде следующее:

var list = document.querySelectorAll('img');

for(var i=0; i<list.length; i++) {
  var item = list[i];
  item.addEventListener('mouseover', function(){
    console.log(i);
  });
}

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

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

var list = document.querySelectorAll('img');

for(var i=0; i<list.length; i++) {
  // Función anónima
  (function(i){
    var item = list[i];
    item.addEventListener('mouseover', function(){
      console.log(i);
    });
  })(i);
}

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100x100&w=100&h=100">

Здесь у нас был бы ожидаемый результат.

Из чего проистекает поведение?:

В первом случае, переменной i будешь увеличивать изменяя Вашу предыдущую стоимость, так что, когда его становится одним mouseover на изображении, он так называемый i с последней стоимостью, установленной в цикле (в Ваше последнее повторение).

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

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

function EjemploUno(){} 

Заявление поднимает функцию.

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

var EjemploDos = function(){}

Заявление поднимает var EjemploDos, но Ваша стоимость (функция) неопределенная.

Ссылка