Самовыполняющиеся функции JavaScript


Недавно меня сильно пробило на чтение всяческих обучающих материалов, просмотр видео роликов на тему программирования и сайтостроение. Оказывается, в Интернете столько всего, что всё знать вряд ли получится. А жаль:( Очень много информации, как полезной, так и не очень. Уже не помню, на каком именно сайте наткнулся на краткую информацию о самовыполняющихся функциях. Должен сказать, что я не обратил бы на этот термин практически никакого внимания, кроме как просто запомнил бы и, может быть, когда-нибудь, пришлось бы такие функции исползовать, если бы не недавний мой пост про создание интерактивных закладок в браузерах.

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

// определяем функцию

var execute = function(){
  $('result').set('text', 'функция execute выполнена');

}
 
//определяем условия ее выполнения
window.addEvent('domready', function(){
    $('exec').addEvent('click', execute);

});


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

(function(){

 
// определяем действия в функции
 
})();
//скобки говорят обработчику, что нужно сразу выполнить фунцию,
//определённую немного ранее

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

Пока мне в голову пришел только один пример работы самовыполняющейся функции: добавим еще несколько строчек JavaScript к нашему предыдущему примеру с функцией execute и, через setTimeout() добавим самовыполняющуюся функцию, которая изменит результат выполнения предыдущей функции execute через 2 секунды, потому обратите внимание на текст сообщения над кнопкой вызова. А вот, собственно, и сам код:

var execute = function(){

  $('result').set('text', 'функция execute выполнена');
}

 
var unexecute = function(){
  $('result2').set('text', 'функция execute выполнена');

  setTimeout((function(){
    $('result2').set('text', 'и через 2 секунды определяется и самовыполняется функция unexecute')

  }), 2000)
}
 
window.addEvent('domready', function(){

		$('exec').addEvent('click', execute);
		$('unexec').addEvent('click', unexecute);

	});


,

  1. #1 by rootmink on 10.06.2010 - 11:35 am

    Спасибо! Анализировал плугин Meio.Autocomplete и не мог понять, что именно означает применение (function(){})(this). Вся становиться на свои места. Спасибо!

(никто не узнает)

Код на картинке: