Usando métodos de instância como retornos de chamada para manipuladores de eventos altera o escopo de this
partir "Meu instância" para "Seja qual for chamado apenas o retorno de chamada" . Então, meu código fica assim
function MyObject() {
this.doSomething = function() {
...
}
var self = this
$('#foobar').bind('click', function(){
self.doSomethng()
// this.doSomething() would not work here
})
}
Funciona, mas é a melhor maneira de fazê-lo? Parece estranho para mim.
javascript
jquery
scope
closures
defnull
fonte
fonte
self
pois existe umwindow.self
objeto, e pode acabar usando isso acidentalmente se esquecer de declarar seu próprioself
var (por exemplo, ao mover algum código). Isso pode ser irritante para detectar / depurar. Melhor usar algo parecido_this
.this
é dinâmico em JavaScript. É determinado quando a função é chamada , não quando é declarada."self === this
. Portanto,self
em contextos locais, faz sentido e segue o padrão.Respostas:
Esta questão não é específica para jQuery, mas específica para JavaScript em geral. O principal problema é como "canalizar" uma variável nas funções incorporadas. Este é o exemplo:
Essa técnica depende do uso de um fechamento. Mas não funciona
this
porquethis
é uma pseudo-variável que pode mudar de escopo para escopo dinamicamente:O que podemos fazer? Atribua-o a alguma variável e use-o através do alias:
this
não é exclusivo a esse respeito:arguments
é a outra pseudo-variável que deve ser tratada da mesma maneira - por meio de alias.fonte
Sim, isso parece ser um padrão comum. Alguns programadores usam auto, outros me usam. É usado como uma referência ao objeto "real" em oposição ao evento.
É algo que demorei um pouco para realmente entender, parece estranho no começo.
Eu costumo fazer isso na parte superior do meu objeto (desculpe meu código de demonstração - é mais conceitual do que qualquer outra coisa e não é uma lição sobre a excelente técnica de codificação):
fonte
edit: apesar de, funções aninhadas dentro de um objeto assumem o objeto da janela global em vez do objeto circundante.
fonte
var self = this
faz, mas não é isso que a pergunta está perguntando (a pergunta está perguntando se essa é a melhor solução para o problema).Se você estiver executando o ES2015 ou o script de tipo e o ES5, poderá usar as funções de seta no seu código e não terá esse erro. Isso se refere ao escopo desejado em sua instância.
fonte
this
de seu escopo definido. Definições de funções normais não fazem isso.Uma solução para isso é vincular todo o seu retorno de chamada ao seu objeto com o
bind
método javascript .Você pode fazer isso com um método nomeado,
Ou com um retorno de chamada anônimo
Fazendo isso em vez de recorrer a
var self = this
mostra, você entende como a ligação dethis
se comporta em javascript e não depende de uma referência de fechamento.Além disso, o operador de seta gorda no ES6 é basicamente o mesmo que chamar
.bind(this)
uma função anônima:fonte
Eu não usei o jQuery, mas em uma biblioteca como Prototype você pode vincular funções a um escopo específico. Portanto, com isso em mente, seu código ficaria assim:
O método bind retorna uma nova função que chama o método original com o escopo que você especificou.
fonte
$('#foobar').ready('click', this.doSomething.call(this));
certo?bind
método não funciona em navegadores antigos; portanto, use o$.proxy
método.Apenas adicionando a isso que no ES6, devido às funções de seta, você não precisa fazer isso porque captura o
this
valor.fonte
Eu acho que realmente depende do que você fará dentro de sua
doSomething
função. Se você quiser acessarMyObject
propriedades usando essa palavra-chave, precisará usá-la. Mas acho que o seguinte fragmento de código também funcionará se você não estiver fazendo nada de especial usandoobject(MyObject)
propriedades.fonte