Parte essencial do JavaScript, toda função tem contexto (this
). Como funciona ele, como manipulá-lo e o que muda no modo estrito ('use strict'
)?
1 Resposta
Em JavaScript, o contexto de execução de um trecho de código - que define qual o seu escopo léxico, dentre outras coisas - possui uma propriedade chamada ThisBinding
, que pode ser acessada a qualquer momento através da palavra-chave this
. Essa propriedade - presente mesmo quando não se está dentro de uma função e/ou essa função não é método de um objeto - é popularmente conhecida como o contexto [da função].
Inicialmente (i.e. no "top-level") o this
corresponde a uma referência para o objeto global. Nos browsers, ele é chamado window
, e é auto-referente. Ao se interpretar um código através de eval
, ele é mantido como está.
Ao se chamar uma função, ele muda da seguinte forma:
Caso essa função seja chamada na forma de um método (i.e. nome, ponto, nome, parênteses) o
this
torna-se uma referência para o objeto que foi "alvo" da chamada:obj.f(); // Dentro de "f", this === obj
Como apontado por @bfavaretto, se o objeto for um tipo primitivo (como um número), então o
this
pode sofrer coerção para um objeto. Isso não ocorre no modo estrito.Number.prototype.foo = function() { console.log(typeof this); } 10.0.foo(); // "number" no modo estrito, "object" caso contrário
Caso se use um dos métodos
call
,apply
oubind
, othis
é atribuído explicitamente:f.call(obj, foo, bar); // Dentro de "f", this === obj f.apply(obj, [foo]); // idem f.bind(obj); // idem
Isso vale ainda que a função tenha sido referenciada na forma de "método de um objeto":
obj.f.call(bar); // Dentro de "f", this === bar
No modo estrito, o que for passado como primeiro parâmetro será o
this
, sem modificação. Caso contrário, pode haver a mesma coerção a objeto mencionada anteriormente ou, se o valor passado como parâmetro fornull
ouundefined
, othis
volta a ser o objeto global:f.call(20); // 20 no modo estrito, Number(20) caso contrário f.call(null); // null no modo estrito, window caso contrário f.call(); // undefined no modo estrito, window caso contrário
Caso a função seja chamada na forma "normal" (i.e. nome, parênteses), então das duas uma:
No modo estrito,
this
seráundefined
:"use strict"; f(); // Dentro de "f", this === undefined
Nos demais casos,
this
volta a ser uma referência para o objeto global:f(); // Dentro de "f", this === window
...o que muitas vezes causa confusão:
var obj = { f:function() { function g() { console.log(this); // this não é obj, e sim window ou undefined // (conforme o modo, estrito ou não) } g(); // Espera-se que imprima "obj", mas não é o que ocorre } }
A principal forma de manipulação do contexto, como já foi visto, é atraves dos métodos call
, apply
e bind
. Este último cria uma "visão" da função original onde o this
está "amarrado" ao parâmetro utilizado, e não pode ser modificado (uma espécie de currying, também permitindo fixar os primeiros N argumentos) - nem mesmo pelos demais métodos:
function f() {
console.log(this);
}
var x = f.bind(10); // this está amarrado a 10
x.call(20); // não muda o this, ainda imprime 10
Quanto ao modo estrito, o principal impacto nesse contexto é aquele exposto acima - onde o this
não se refere ao objeto global quando omitido (i.e. quando não atribuído explicitamente). Isso tem impacto na segurança, pois facilita o isolamento (sandboxing) de código não totalmente confiável. Há muitos outros impactos que o modo estrito exerce sobre contextos de execução e escopo, mas nada que afete o funcionamento do this
(mesmo o eval
continua se comportando da mesma maneira nos dois modos).
-
1
-
2Acho que só faltou um detalhe, do qual lembrei lendo seu último exemplo: se
this
for um valor primitivo, ele sofre coerção para objeto (no caso do seu exemplo, paraNumber
); no strict mode, porém, não ocorre coerção. Commented 12/03/2014 às 1:25 -
Complementando, isso está na seção 10.4.3 da especificação. Commented 12/03/2014 às 1:31
-
@bfavaretto hehe se a pergunta fosse sobre contextos de execução (e não só sobre o
this
), eu ia deixar pra quem sabe mais... :P (P.S. bem lembrado quanto à coerção! eu sabia que isso era feito no modo normal, mas não que no modo strict era diferente) Commented 12/03/2014 às 3:07 -
+1 você escreve muito bem, sua explicação está sucinta e bem completa. Eu ia auto-responder, mas depois dessa não vejo necessidade hehe Commented 12/03/2014 às 3:38
this
? Pergunto porque "contexto" é um termo muito usado para isso, mas não é o termo usado na especificação da linguagem.this
nesta pergunta, o termo contexto é usado pelo Douglas Crockford e acabou derivando em outros livros conceituados como a Javascript O Guia Definitivo por David Flanagan