Mudando o ‘this’ de uma função Javascript

O nosso querido Bruno Tikami (Membro da Python Brasil e desenvolvedor Django e Zope/Plone) atiçou minha curiosidade com relação a mudar o this de uma função/objeto/bla JavaScript.

Sua intenção era manter o this de um objeto Tool quando o evento jQuery .click() fosse disparado.

Sei que em ActionScript (2.0 – não possuo conhecimento suficiente para afirmar que a terceira versão o suporta) isso é possível de duas formas: Usando a Classe Delegate (que é o que eu uso [quando uso]), outra forma seria definir o escopo diretamente no objeto futuro.

A Classe Delegate possui um método estático chamado create. Este cara que faz a mágica do negócio. Vamos ver como é a implementação [1] desse método:

static function create(obj:Object, func:Function):Function
{
var f = function()
{
var target = arguments.callee.target;
var func = arguments.callee.func;

return func.apply(target, arguments);
};

f.target = obj;
f.func = func;

return f;
}

O que isso faz?

Basicamente, a mágica está no .apply() que é o método que muda o this da função em questão [2]. O Resto é preciosismo pra manter os argumentos passados para o objeto.

Como ActionScript e JavaScript (bem como JScript) seguem o padrão da linguagem ECMAScript [3], poderíamos portar essa implementação para JavaScript, não?

Com certeza!

Retirando as frescuras do ActionScript, o resultado será:

function delegate(obj, func){
var f = function(){
var target = arguments.callee.target;
var func = arguments.callee.func;

return func.apply(target, arguments);
};

f.target = obj;
f.func = func;

return f;
}

Como usa?

Essa função recebe dois argumentos: obj e func. obj é o objeto que vai virar o this da função func.

Como “somente o exemplo arrasta”, rode isso no firebug em uma página com jquery (Recomendo o jquery.com):

function delegate(obj, func){
var f = function(){
var target = arguments.callee.target;
var func = arguments.callee.func;

return func.apply(target, arguments);
};

f.target = obj;
f.func = func;

return f;
}
var picanha = function(){
console.info(this);
}
jQuery('h3').click(delegate(jQuery('body'), picanha));

Clicando em qualquer elemento h3, será impresso no console do jQuery o this, que é a TAG body “jqueryficada”.

Para quem quiser saber melhor sobre, leia as referências (em inglês).

fonte: http://www.terrainformatica.com/?p=9

Referências:
[1] http://www.actionscript.org/forums/showthread.php3?t=103460
[2] http://www.devguru.com/technologies/ecmascript/quickref/apply.html
[3] http://en.wikipedia.org/wiki/ECMAScript

Leave a Reply

Your email address will not be published. Required fields are marked *