короче

резюме

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

это помогает уменьшает шансы:

• конфликтуя с другими приложениями/библиотеками
• загрязняя главный (глобальный наиболее вероятно) объем

это не определить, когда документ готов - это не какой-то document.onload ни window.onload

он широко известен как Immediately Invoked Function Expression (IIFE) или Self Executing Anonymous Function.

Кодекса

var someFunction = function(){ console.log('wagwan!'); };

(function() {                   /* function scope starts here */
  console.log('start of IIFE');

  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();                           /* function scope ends */

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

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

Javascript имеет область действия функции. "Параметры и переменные, определенные в функции, не видны вне функции, и что переменная, определенная где-либо внутри функции, видна везде внутри функции.(из "Javascript: хорошие части").

---

более подробная информация

Код

в конце концов, код, опубликованный ранее, также может быть выполнен следующим образом:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
};

myMainFunction();          // I CALL "myMainFunction" FUNCTION HERE
someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

посмотреть демо.

---

в Корни

итерация 1

если вы вернетесь к основам, вы узнаете, что:

• expression: что-то оценивать значение. то есть 3+11/x
• statement: строка(ы) кода делает что-то, но это делает не оценить значение. т. е. if(){}

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

 var italianSayinSomething = function(){ console.log('mamamia!'); }();

таким образом, наш более сложный пример становится:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
}();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

посмотреть демо.

итерация 2

следующий шаг-это мысль "зачем var myMainFunction = если мы даже не использовать его!?".

ответ прост: попробуйте удалить это, например ниже:

 function(){ console.log('mamamia!'); }();

посмотреть демо.

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

фишка в том, что путем удаления var myMainFunction = мы преобразовали выражение функции на объявление функции. См. ссылки в разделе "Ресурсы" для получения более подробной информации об этом.

следующий вопрос: "почему я не могу сохранить ее как выражение функции с чем-то другим чем var myMainFunction =?

ответ "вы можете", и на самом деле есть много способов сделать это: добавление +, a !, a -, или, может быть, обертывание в пару скобок (как это теперь делается по соглашению), и больше я верю. Как пример:

 (function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.

или

 +function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console

или

 -function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console

• что означает восклицательный знак перед функцией?
• JavaScript плюс вход перед именем функции

поэтому, как только соответствующая модификация будет добавлена к тому, что когда-то было нашим "альтернативным кодом", мы вернемся к тому же самому коду, который использовался в Примере "Code Explained"

var someFunction = function(){ console.log('wagwan!'); };

(function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

подробнее о Expressions vs Statements:

• developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Function_constructor_vs._function_declaration_vs._function_expression
• Javascript: разница между оператором и выражением?
• Слова Против Заявление

---

Демистификации Области

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

(function() {
  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  myOtherFunction = function(){  /* oops, an assignment instead of a declaration */
    console.log('haha. got ya!');
  };
})();
myOtherFunction();         // reachable, hence works: see in the console
window.myOtherFunction();  // works in the browser, myOtherFunction is then in the global scope
myFunction();              // unreachable, will throw an error, see in the console

посмотреть демо.

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

когда в среде браузера (против серверной среды, такой как nodejs) глобальная область определяется

Javascript в браузере действительно имеет только несколько эффективных областей: область функций и глобальная область.

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

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

пример. Предположим, я напишу:

(function() {

    var x = 2;

    // do stuff with x

})();

сейчас другие библиотеки не могут получить доступ к переменной x Я создал для использования в моей библиотеке.

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

   navigator.html5={
     canvas: (function(){
      var dc= document.createElement('canvas');
      if(!dc.getContext) return 0;
      var c= dc.getContext('2d');
      return typeof c.fillText== 'function'? 2: 1;
     })(),
     localStorage: (function(){
      return !!window.localStorage;
     })(),
     webworkers: (function(){
      return !!window.Worker;
     })(),
     offline: (function(){
      return !!window.applicationCache;
     })()
    }

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

(function($) { ...code...})(jQuery);

1. чтобы избежать столкновения с другими методами / библиотеками в том же окне,
2. избегайте глобальной области, сделайте ее локальной областью,
3. чтобы ускорить отладку (локальная область),
4. JavaScript имеет только область действия функции, поэтому он также поможет в компиляции кодов.

мы также должны использовать 'use strict' в функции scope, чтобы убедиться, что код должен выполняться в "строгом режиме". Пример кода показан ниже

(function() {
    'use strict';

    //Your code from here
})();