Compreender a palavra-chave 'this' em JavaScript

'este' em JavaScript

Em JavaScript é mais complicado porque onde este depende não só da forma como a função é definida, mas também da forma de a chamar.

Veja como este funciona consoante o local e a forma de invocação.

Contexto global

Utilizado num contexto global ligado ao objeto global, como janela num navegador Web.

this; // janela

Dentro do método do objeto

Utilizado no interior de um método de objeto ligado ao objeto envolvente mais próximo. O objeto é o novo contexto do método este palavra-chave. Note-se que não se deve alterar função () para a sintaxe ES6 fun: () => this.context porque isso vai alterar o contexto.

const obj = {
  contexto: "object",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // objeto

Neste exemplo, com um objeto aninhado, este ainda se refere ao seu contexto mais próximo.

const nestedObj = {
  contexto: "parent",
  child: {
    contexto: "child",
    fun: function() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // child

Função sem contexto

Utilizado dentro de uma função que não tem contexto (não tem um objeto como pai) ligado ao contexto global, mesmo que a função seja definida dentro do objeto.

Note-se que utilizamos var contexto em vez de let/const contexto porque deixar e const alterar o contexto da variável incluída. var é sempre o mais próximo do contexto de execução global. deixar e const declarar variáveis apenas no âmbito de um bloco local.

var contexto = "global";

const obj = {
  contexto: "object",
  funA: function() {
    function funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // invocado sem contexto
  }
};

obj.funA(); // global

Dentro da função de construtor

Utilizada no interior de uma função que é o construtor do novo objeto a ela ligado.

var contexto = "global";

função Obj() {
  this.context = "Obj context";
}

const obj = new Obj();
obj.context; // Contexto do objeto

Função interna definida na cadeia de protótipos

Utilizado dentro de uma função definida no protótipo para criar um objeto ligado a ele.

const ProtoObj = {
  fun: function() {
    return this.name;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo

No interior chamar() e as funções apply()

chamar() e aplicar() são JavaScript funções. Com estas, um objeto pode utilizar métodos pertencentes a outro objeto. chamar() recebe argumentos separadamente onde aplicar() recebe-os como uma matriz.

este está aqui ligado ao novo contexto alterado em chamar() e aplicar() métodos.

const objA = {
  contexto: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  contexto: "objB"
};

objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

Dentro da função bind()

bind() é também um método JavaScript. Ele cria uma nova função que terá este definido como o primeiro parâmetro passado para bind()**.**

const objA = {
  contexto: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  contexto: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]

Dentro dos manipuladores de eventos

Utilizado em qualquer manipulador de eventos (por exemplo, addeventListener, onclick, attachEvent), este é ligado ao elemento DOM ao qual o evento foi anexado.

document.querySelector(".foo").addEventListener("click", function() {
  this; // refere-se ao elemento da div `foo
});

Função de seta ES6

Utilizada no interior da função de seta, está sempre ligada ao seu âmbito lexical. Na função de seta, não é possível reatribuir o este de qualquer forma.

const globalArrowFunction = () => this;

globalArrowFunction(); // Janela

const obj = {
  contexto: "object",
  funA: () => this,
  funB: function() {
    return () => {
      retorna this.context;
    };
  }
};

obj.funA(); // Janela
obj.funB()(); // objeto

Ler mais:

• Os maiores desafios do desenvolvimento de software personalizado
• Quais são as diferenças entre uma software house e uma agência de recrutamento de pessoal de TI?