Малко трикове с arguments.callee в JavaScript

В JavaScript във всяка функция има предефинирана променлива arguments. Тя представлява масиво подобна структура съдържаща аргументите подадени към функцията  и callee . В поста ще се постарая да обясня какво точно е callee и как би било полезно.

Само да поясня за думата “масиво подобна структура”, преди да продължа нататък. Това значи, че arguments изглежда като масив. Т.е може да се достъпват  елементи от него с arguments[n] и има свойството length, което оказва броя на елементите. Но до тук свършват прилики му с масива, в повечето браузъри arguments няма нито един метод. Това е една от главните причина в prototype.js да я има $A функцията.

Така, но да се върнем на arguments.callee, какво точно е това? В callee се записва връзка (или референция, ако това звучи по-добре) към текущата функция, т.е. функция в която е arguments. Това може да се илюстрира със следния пример:

function foo(){
    console.log(arguments.callee == foo);
}

foo(); // true

Защо толкова често foo се ползва в примери, някои знае ли ? Даже страница в wikipedia има – foobar.

Два прости примера

// пример едно:
// функция която брои колко колко пъти е била викана.
function example1(){
    console.log(++arguments.callee.count);
}

example1.count = 0;
example1(); // 1
example1(); // 2
// и така на татък

// пример две:
// функция, която проверява дали броя на подадените аргументи е толкова колкото се очакват
function example2(a, b){
    if (arguments.length == arguments.callee.length){
        // тук може и throw "error" да се хвърли, но за примера и това върши работа
        console.log(
            'expected ' + arguments.callee.length + ' argument(s) given ' + arguments.length
        );
    }
}

example2();          // грешка
example2(1);         // грешка
example2(1, 2);      // работи
example2(1, 2 , 3);  // грешка</pre>

Във втория пример използвам Functon.length, който указва колко аргумента очаква дадената функция.

Два полезни примера

Като цяло с argument.callee може да се правят доста магии. В практиката повечето случаи, в които съм го ползвал е, когато съм имал анонимна функция и искам да направя нещо със самата функция и ми трябва връзка към нея.

Пример1: Имате event  handler при click и искате след първото натискане този handler да се махне.
В допълнение може да се направи при click event handler-ът да се предава от елемент на елемент, но това няма да го пиша, за да не натоварвам примера (ако някои иска може да го напиша допълнително).

// предполагам, че се ползва prototype.js
$('element').observe('click', function(){
    alert('this will be shown only one time');

    this.stopObserving('click', arguments.callee);
});

Пример2: прост ефект – увеличаване на размерите на квадрат. Използва анонимна функция която се само извиква с timeout, докато div-а не достигне максималния си размер. В повечето случаи interval би вършил работа, но принципа е важен в случая.

// тук създавам примерен div
var element = new Element('div').setStyle({
    width: '10px',
    height: '10px',
    backgroundColor: 'red'
});

document.body.appendChild(element);

var step = 10, max = 1000, time = 10;

(function(){
    var width = parseInt(element.style.width) + step,
        height = parseInt(element.style.height) + step;

    element.style.width = width + 'px';
    element.style.height = height + 'px';

    if (max > width && max > height){
        setTimeout(arguments.callee, time);
    }
})();

Малко допълнителна информация за arguments

Оказва се, че някои браузъри дефинират arguments само, когато е необходимо. Т.е. ако в тялото на фунцията не се използва никъде arguments, тя въобще не се дефинира.  Което спестява време и ускорява самия кода.  Тук има повече информация по този въпрос. Този факт е интересен и си мисля, че повече javascript интерпретатори ще използват подобен похват в бъдеще.