Я часто вижу следующий код:
(function () {
// init part
})();
но я никогда не мог понять, как это работает. Я считаю, что последние скобки особенно сбивают с толку. Может ли кто-нибудь объяснить, как это работает с точки зрения контекстов выполнения (EC) и переменных объектов (VO)?
Этот шаблон создаст новый контекст выполнения (EC), в котором будут жить любые локальные переменные объекты (VO), и будет также умирать, когда EC выйдет. Единственным исключением из этого срока жизни является VO, которые становятся частью closure.
Обратите внимание, что JavaScript не имеет волшебной функции "init". Вы можете связать этот шаблон с таким, так как большая часть любой уважающей себя библиотеки JS (jQuery, YUI и т.д.) Будет делать это, чтобы они не загрязняли глобальную NS больше, чем нужно.
Демонстрация:
var x = 1; // global VO
(function(){
var x = 2; // local VO
})();
x == 1; // global VO, unchanged by the local VO
Второй набор "скобок" (те, которые на самом деле называются parens или набор круглых скобок), просто вызывают выражение функции, непосредственно предшествующее ему (как определено предыдущим набором скобок).
Как я обычно объясняю это людям, это показать, как он похож на другие шаблоны JavaScript.
Во-первых, вы должны знать, что есть два способа объявить функцию (фактически, там по крайней мере пять, но это два главных виновника):
function foo() {/*code*/}
и
var foo = function() {/*code*/};
Даже если эта конструкция выглядит странно, вы, вероятно, постоянно ее используете при добавлении событий:
window.onload=function(){/*code*/};
Вы должны заметить, что вторая форма не сильно отличается от объявления регулярной переменной:
var bar = 5;
var baz = 'some string';
var foo = function() {/*code*/};
Но в JavaScript у вас всегда есть выбор между использованием значения напрямую или через переменную. Если bar - 5, то следующие два утверждения эквивалентны:
var myVal = bar * 100; // use 'bar'
var myVal = 5 * 100; // don't use 'bar'
Хорошо, если вы можете использовать 5 самостоятельно, почему вы не можете использовать function() {\*code*\} самостоятельно? На самом деле, вы можете. И это называется анонимной функцией. Таким образом, эти два примера также эквивалентны:
var foo = function() {/*code*/}; // use 'foo'
foo();
(function(){/*code*/}()); // don't use 'foo'
Единственное различие, которое вы должны увидеть, - это дополнительные скобки. Это просто потому, что, если вы начинаете строку с ключевого слова function, синтаксический анализатор будет считать, что вы объявляете функцию, используя самый первый шаблон в верхней части этого ответа, и бросаете исключение синтаксической ошибки. Поэтому заверните всю анонимную функцию внутри пары фигурных скобок, и проблема исчезнет.
Другими словами, допустимы следующие три утверждения:
5; // pointless and stupid
'some string'; // pointless and stupid
(function(){/*code*/}()); // wonderfully powerful
Код создает анонимную функцию, а затем сразу запускает ее. Похоже на:
var temp = function() {
// init part
}
temp();
Цель этой конструкции - создать область для кода внутри функции. Вы можете объявлять переменные и функции внутри области действия, и они будут локальными для этой области. Таким образом, они не загромождают глобальный масштаб, что сводит к минимуму риск конфликтов с другими сценариями.
Я не могу поверить, что никто не ответил на вопрос ops!
Последний набор скобок используется для передачи в параметры анонимного вопроса. Итак, следующий пример создает функцию, затем запускает ее с помощью x = 5 и y = 8
(function(x,y){
//code here
})(5,8)
Это может показаться не очень полезным, но оно имеет свое место. Самый распространенный из них, который я видел, -
(function($){
//code here
})(jQuery)
который позволяет jQuery находиться в совместимом режиме, но вы можете ссылаться на него как "$" в анонимной функции.
Self invoking anonymous function (SIAF)
Самозапускающиеся функции запускаются мгновенно, даже если DOM не полностью готов.
В простом слове вы можете понять, что всякий раз, когда нагрузка на страницу, этой второй парой функций brackets() вызывается по умолчанию. Нам не нужно вызывать функцию. Она известна как анонимная функция.
то есть.
(function(a,b){
//Do your code here
})(1,2);
Это то же самое, что и
var test = function(x,y) {
// Do your code here
}
test(1,2);
Его называют оперативно вызывающим функциональным выражением (IIFE). В основном это связано с концепцией закрытия JavaScript. Основное назначение - запустить функцию до изменения глобальной переменной, чтобы можно было ожидать ожидаемого поведения кода.