Palavra-chave this em JavaScript

Exemplo

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Experimente você mesmo

O que é this?

JavaScript this a palavra-chave refere-se ao objeto ao qual pertence.

ele tem diferentes valores dependendo de sua posição de uso:

  • No método,this refere-se ao objeto proprietário.
  • No caso isolado,this refere-se ao objeto global.
  • Na função,this refere-se ao objeto global.
  • Na função, no modo estrito,this é undefined.
  • No evento,this refere-se ao elemento que recebe o evento.

como call() e apply() Esse método pode referenciar this para qualquer objeto.

this no método

No método do objeto,this refere-se ao "proprietário" desse método.

No exemplo mais alto dessa página,this refere-se ao objeto person.

o objeto person é o proprietário do método fullName.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Experimente você mesmo

this isolado

No uso isolado, o proprietário é o objeto global, portanto this refere-se ao objeto global.

No navegador da web, o objeto global é [object Window]：

Exemplo

var x = this;

Experimente você mesmo

No modo estrito, se usado isoladamente, this refere-se ao objeto global [object Window]：

Exemplo

"use strict";
var x = this;

Experimente você mesmo

this na função (padrão)

No JavaScript, o proprietário da função é ligado por padrão this。

portanto, em uma função,this refere-se ao objeto global [object Window]。

Exemplo

function myFunction() {
  return this;
}

Experimente você mesmo

this na função (modo estrito)

O modo estrito do JavaScript não permite a ligação padrão.

portanto, ao usá-lo em uma função, no modo estrito,this é indefinido (undefined）。

Exemplo

"use strict";
function myFunction() {
  return this;
}

Experimente você mesmo

this no gerenciador de eventos

No gerenciador de eventos HTML,this refere-se ao elemento HTML que recebe esse evento:

Exemplo

<button onclick="this.style.display='none'">
  clique para me deletar!
</button>

Experimente você mesmo

ligação de método de objeto

Neste exemplo,this é o objeto person (o objeto person é o "proprietário" dessa função):

Exemplo

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

Experimente você mesmo

Exemplo

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Experimente você mesmo

Em outras palavras,this.firstName significa thisdo objeto firstName Propriedades.

Função de Ligação Explícita

call() e apply() Métodos são métodos JavaScript pré-definidos.

Ambos podem ser usados para chamar métodos de objetos com outro objeto como parâmetro.

pode ler mais sobre no final deste tutorial. call() e apply() mais informações.

no exemplo a seguir, ao usar person2 como parâmetro ao chamar person1.fullName,this fará referência a person2, mesmo que seja um método de person1:

Exemplo

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // Retornará "Bill Gates"

Experimente você mesmo