O que é a palavra-chave "this" em JavaScript?
Como sabemos que os objetos são os componentes básicos do JavaScript, existe um objeto especial chamado 'this' e o valor 'this' pode ser visto em todas as linhas de execução do JavaScript, que são decididas novamente com base em como o código é sendo executado. Neste tópico, vamos aprender sobre a palavra-chave "this" em JavaScript.
Importância da palavra-chave "this" no JavaScript
- O objeto 'this' no JavaScript tem muitas funções e usos importantes. É usado principalmente para apontar para uma instância de um objeto a partir de seu próprio método ou construtor. Juntamente com apontar, 'this' também pode ser usado para acompanhar a execução do contexto com base em onde a função é chamada.
- A próxima coisa sobre a função 'this' no JavaScript é que o link para o Contexto de Execução pode mudar. E, finalmente, o link para o Contexto de Execução também pode ser estabelecido quando é referido por uma função de retorno de chamada, mesmo que a função esteja definida dentro do objeto construtor.
Por que usar a palavra-chave "this" em JavaScript?
- No JavaScript, a palavra-chave 'this' é usada em muitos contextos para fazer o melhor uso possível dos contextos. Basicamente, a palavra-chave 'this' é usada para se referir a algum objeto ou função em JavaScript. Como pela própria palavra (isto), podemos entender que está se referindo a algo. Para entender melhor isso de uma maneira prática, podemos considerar um exemplo que o Sr. X jogou Cricket e ele venceu o jogo.
- Então, aqui, no lugar de usar o Sr. X novamente, usamos 'ele', que se refere apenas ao Sr. X. Está nos ajudando a não mencionar a mesma coisa repetidamente. Da mesma forma, no JavaScript também, podemos usar a função ou o objeto 'this' para referenciar outra função ou objeto com o valor invocado nessa função ou objeto. Normalmente, 'this' é usado dentro de uma função ou método, mas também pode ser usado fora da função (no escopo global).
Como usar a palavra-chave "this"?
- Como sabemos que o JavaScript é uma linguagem de script, não há necessidade de compilar os códigos, mas é executado no tempo de execução. Pode ser executado diretamente pelo intérprete, linha por linha. E o ambiente ou o escopo em que os códigos JavaScript estão sendo executados é chamado de "Contexto de Execução".
- O tempo de execução JavaScript mantém uma pilha de contextos de execução e mantém a pilha atual no topo. O objeto que é referido por "this" é alterado toda vez que o Contexto de Execução é alterado.
- Simplesmente, podemos assumir que quando uma função é criada ao mesmo tempo, uma palavra-chave 'this' também está sendo criada (nos bastidores) que se vincula ao objeto em que a função opera. A palavra-chave 'this' funciona de maneira diferente em JavaScript e em outras linguagens de programação.
Ele possui vários valores, dependendo de onde o usamos, por exemplo:
- 'this' refere-se ao objeto proprietário em um método.
- 'this' refere-se ao objeto global na situação isolada.
- 'this' também se refere aos objetos globais em uma função simples.
- 'this' refere-se a um elemento em um evento que recebe o evento.
- 'this' é indefinido em uma função de modo estrito.
1. Usado com um campo
Exemplo : Abaixo, 'this' refere-se a um objeto chamado pessoa. E a pessoa é o proprietário do método fullName.
var employee = (
firstName: “Raju”,
lastName: “Chaudhury”,
id: 123
fullName: function() (
return this.firstName + “ ” + this.lastName;
)
)
Um pequeno exemplo para um campo de formulário:
check to alert this object name
Coloque o nome e marque a opção de rádio abaixo para alertar sua entrada
Marque esta opção para alertar a entrada do campo de texto
Observe o envio do manipulador de eventos ao abrir o formulário para ver as ações executadas ao clicar no botão Enviar
2. Usado para invocar um construtor
Normalmente, quando usamos a palavra-chave 'new' para criar uma instância para um objeto de função, usamos a função como construtor.
No exemplo abaixo, declaramos uma função Bike e a chamamos como construtor:
function Bike(name)(
this.name = name;
)
Bike.prototype.getName = function()(
return this.name;
)
var bike = new Bike('Pulsar');
console.log(bike.getName());
No exemplo acima, o novo Bike ('Pulsar') é um construtor da função Bike. Aqui, o JavaScript cria um novo objeto e coloca 'this' palavra-chave no objeto recém-criado. Portanto, agora podemos invocar Bike () como a função ou como o construtor. Aqui, no caso de removermos a palavra-chave 'new', será exibido um erro como abaixo:
var bajaj = Bike('Bajaj');
console.log(bajaj.name);
/ * Ele será exibido como TypeError: Não é possível ler a propriedade 'name' de undefined * /
Isso porque, isso na função Bike () é colocado no objeto global, o resultado bajaj.name é indefinido.
Para tornar a função Bike () sempre invocada usando o construtor, verificamos no início da função Bike () como abaixo:
function Bike(name)(
if( ! (this instanceof Bike)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)
Há uma metaproperty conhecida como "new.target" que permite detectar se uma função é chamada como uma simples invocação ou construtor.
Aqui, podemos editar a função Bike () que usa a metaproperty new.target como abaixo
function Bike(name)(
if( ! new.target)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)
3. Usado para retornar a instância de classe atual
Uma expressão de classe também é uma maneira de definir uma classe em JavaScript. Também pode ser nomeado ou sem nome. O nomeado é o local para o corpo da classe e t pode ser recuperado pelas propriedades da classe.
/ * exemplo para uma expressão de classe sem nome * /
let Mobile = class (
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name); //Output: Mobile
/ * exemplo para uma expressão de classe nomeada * /
let Mobile = class Mobile2(
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name);
Saída: Mobile2
4. Usado como parâmetro de método
Quando chamamos o método de um objeto, o JavaScript coloca 'this' no objeto que possui o método.
Exemplo:
var Bike = (
name: 'Pulsar',
getName: function()(
return this.name;
)
)
console.log(bike.getName()); /*Pulsar*/
Aqui, esse método getName () interno refere-se a um objeto de bicicleta.
Conclusão
A palavra-chave 'this' no JavaScript é uma ferramenta poderosa que geralmente ajuda os desenvolvedores a referenciar as propriedades em contextos específicos, mas às vezes pode ser bastante complicado ao aplicar nos vários níveis de escopo. O valor de 'this' também pode ser definido explicitamente com a chamada (), bind () e apply () também. Normalmente, o valor de 'this' é determinado pelo contexto de execução da função. As funções de seta geralmente não ligam 'this' e, em vez disso, 'this' é vinculado lexicamente.
Artigos recomendados
Este é um guia para a palavra-chave "this" em JavaScript. Aqui discutimos a importância e como usar a palavra-chave "this" no JavaScript, juntamente com o exemplo. Você também pode consultar o seguinte artigo.
- Encapsulamento em JavaScript
- Inserção Ordenar em JavaScript
- Palindrome em JavaScript
- Compiladores JavaScript
- esta palavra-chave em java | Exemplos desta palavra-chave
- Regras de instanceOf em Java com Exemplo