Como posso manter o contexto do 'this' em jQuery

Question

Eu tenho algo parecido com isto:

var Something = function(){
  this.render = function(){};
  $(window).resize(function(){
    this.render();
  });
}

O problema é que dentro da função anônima 'isto' se refere ao objeto janela. Eu sei que eu poderia fazer algo como:

var Something = function(){
  this.render = function(){};
  var tempThis = this;
  $(window).resize(function(){
    tempThis.render();
  });
}

mas há uma maneira melhor? Isso não parece muito elegante.

Answer 1

A solução que encontrei é a usar o que a maioria das pessoas. A convenção comum é chamar a variável tempThis "isso".

var Something = function(){
  this.render = function(){};
  var that = this;
  $(window).resize(function(){
    that.render();
  });
};

Answer 2

que se parece com a sua melhor opção, eu não acho que há uma maneira melhor. (Alguém corrigir o meu se eu estiver errado).

Answer 3

FYI a capacidade de controlar isso está vindo no próxima versão do JQuery

Answer 4

Eu venho fazendo isso dessa maneira em muitas situações apertadas. Não parece elegante, mas nunca falha. isso é realmente fechamentos de javascript em ação.

JRH

Answer 5

Isso é exatamente o que eu faço. Não é específico para jQuery, qualquer um.

var Construct = function() {
    var self = this; //preserve scope

    this.materials = 2000;

    this.build = function(){
        self.materials -= 100;
    };
};

Lembre-se de usar a palavra-chave var na frente de sua nova variável escopo. Caso contrário, você está criando uma nova variável global. Como uma variável local, ele ainda estará acessível dentro da função interna através de um fechamento.

Answer 6

A melhor solução, para manter variáveis ??no mínimo seria usar o método Function.prototype.bind ().

var Something = function(){
  this.render = function(){};
  $(window).resize( this.render.bind( this ) );
}

O problema com este método que pode causar complicações futuras, o que significa que você deve optar por usá-lo com moderação, é quando você precisa para invocar $(this) para agarrar o elemento. Então, eu poderia sugerir que seria vale a pena usar Function.prototype.bind() em seu método de redimensionamento, mas não seria uma boa solução para usá-lo em uma função de clique que você pode precisar para atingir o elemento clicado diretamente.

Veja este jsFiddle para um exemplo de trabalho.

Veja a Mozilla Documentação sobre Function.prototype .bind () para mais informações

Os outros métodos são utilizáveis, mas criar uma variável para manter o contexto disso é o efeito indesejado de acordo com a sua pergunta.