Palavra-chave this do JavaScript

Em comparação com outros idiomas, o comportamento do operador this no JavaScript é ligeiramente diferente.

No JavaScript, o operador this faz referência ao objeto ao qual pertence.

De acordo com a posição de uso, ele tem diferentes valores:

• Dentro do método, this faz referênciaObjeto proprietário

• Individualmente, this se refere aobjeto global

• Em uma função, this se refleteobjeto global

• Em uma função, no modo estrito, this énão definidodo

• No evento, this se refere aoelemento

• Métodos como call() e apply() podem ser usados paraqualquer objeto

Contexto de método

No contexto de um método de objeto, this representa o métodouser.

No exemplo a seguir, ao chamaruser.getName()no contexto de uma função, this é vinculado auserobjeto:

var user = {
firstName: "Vishal",
lastName: "Choudhary",
age:　22,
getName: function() {
　return this.firstName　+　" "　+　this.lastName;
};
});
document.write(user.getName());　　　//　"Vishal Choudhary"

aquiusero proprietáriogetNamemétodos.

Contexto global

No contexto de execução global (fora de qualquer função), this sempre se reflete ao objeto global, independentemente do modo estrito estar ativo ou não.

//　No navegador da web, o objeto de janela também é um objeto global:
console.log(this === window);　　//　true
a =　50;
console.log(window.a);　//　50
this.b = "w3codebox";
console.log(window.b)　　//　"w3codebox"
console.log(b)　//　"w3codebox"

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

Contexto de função

Dentro de uma função, o valor de this depende da forma como a função é chamada.

Devido ao código não estar no modo estrito, this por padrão se refere ao objeto global, ou seja, o browser[object Window]:

function myFunc() {
return this;
};

No modo estrito, no entanto, o valor de this éundefined:

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

Portanto, no modo estrito, se o contexto de execuçãonão definidoSe this não for definido, ele permaneceráEstado não definido.

thisNo manipulador de eventos do DOM

Quando uma função é usada como manipulador de eventos, this será configurado para o elemento que desencadeou o evento:

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
});

Quando o código é chamado a partir do manipulador de evento inline, o this é configurado como o elemento onde o ouvinte foi colocado:

<button onclick="this.style.display='none'">Clique para excluir eu</button>

Este é outro exemplo:

<button onclick="alert(this)">Clique</button>

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

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

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

function add(c, d) {
return this.a　+　this.b　+　c　+　d;
};
var obj = {a:5, b:10});
add.call(obj,　5,　7);　　//　27
add.apply(obj, [10,　20]);　//　45

Função Flecha (=>)

No função flecha (=>), this sempre aponta para o escopo léxico onde foi criado.

No código global, ele será configurado como o objeto global:

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj);　　　//　true