19

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')?

3
  • Vai rolar gratificação pra melhor resposta. Commented 11/03/2014 às 23:49
  • 2
    Por "contexto" você quer dizer o valor de this? Pergunto porque "contexto" é um termo muito usado para isso, mas não é o termo usado na especificação da linguagem.
    – bfavaretto
    Commented 12/03/2014 às 0:07
  • @bfavaretto Interessante observação, sim, falo do 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 Commented 12/03/2014 às 0:29

1 Resposta 1

27

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 ou bind, o this é 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 for null ou undefined, o this 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).

jsFiddle com todos os exemplos acima.

5
  • 1
    Nem vou mais responder :)
    – bfavaretto
    Commented 12/03/2014 às 1:20
  • 2
    Acho 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, para Number); no strict mode, porém, não ocorre coerção.
    – bfavaretto
    Commented 12/03/2014 às 1:25
  • Complementando, isso está na seção 10.4.3 da especificação.
    – bfavaretto
    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)
    – mgibsonbr
    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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .