A autora do material, cuja tradução publicamos hoje, diz que, quando trabalhava em contabilidade, eram usados termos claros, cujos significados são fáceis de encontrar no dicionário. Mas, depois de adotar a programação e, em particular, o JavaScript, ela começou a se deparar com conceitos cujas definições não podem mais ser encontradas em dicionários. Por exemplo, isso diz respeito à palavra
this chave
this . Ela lembra o momento em que se encontrou com objetos JS e funções de construtor que usavam essa palavra-chave, mas não foi tão fácil chegar ao seu significado exato. Ela acredita que outros iniciantes enfrentam problemas semelhantes, especialmente aqueles que nunca trabalharam em programação antes. Quem quiser aprender JavaScript terá que lidar com
this qualquer maneira. Este material tem como objetivo ajudar todos a ajudar com isso.
O que é isso?
Trago a sua atenção minha própria definição da
this .
This é uma palavra-chave usada no JavaScript que possui um significado especial, dependendo do contexto em que é usada.
A razão pela qual
this causa tanta confusão para iniciantes é porque o contexto
this muda dependendo do seu uso.
This pode ser considerado uma palavra-chave dinâmica. Eu gosto de como o conceito de "contexto" é revelado
neste artigo por Ryan Morr. Segundo ele, o contexto é sempre o valor da
this , que se refere a um objeto que "possui" o código que está em execução no momento. No entanto, o contexto relacionado a
this não é o mesmo que o contexto de execução.
Portanto, quando usamos a palavra
this chave
this , de fato, nos referimos a algum objeto com sua ajuda. Vamos falar sobre o que é esse objeto, tendo examinado alguns exemplos.
Situações em que isso aponta para um objeto de janela
Se você tentar acessar a
this no escopo global, ela será vinculada ao contexto global, ou seja, ao objeto de
window no navegador.
Ao usar funções que estão disponíveis no contexto global (isso as distingue dos métodos de objeto), a
this nelas apontará para o objeto de
window .
Tente executar este código, por exemplo, no console do navegador:
console.log(this); // Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } // myFunction(); // Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …}
Usando isso dentro de um objeto
Quando
this usado dentro de um objeto, essa palavra-chave se refere ao próprio objeto. Considere um exemplo. Suponha que você criou um objeto
dog com métodos e chamou isso em um de seus métodos. Quando
this usado dentro deste método, essa palavra-chave representa o objeto
dog .
var dog = { name: 'Chester', breed: 'beagle', intro: function(){ console.log(this); } }; dog.intro(); // dog // {name: "Chester", breed: "beagle", intro: ƒ} // breed:"beagle" // intro:ƒ () // name:"Chester" // __proto__:Object
Este e objetos aninhados
A aplicação
this em objetos aninhados pode criar alguma confusão. Em tais situações, vale lembrar que a palavra-chave this se refere ao objeto em cujo método é usado. Considere um exemplo.
var obj1 = { hello: function() { console.log('Hello world'); return this; }, obj2: { breed: 'dog', speak: function(){ console.log('woof!'); return this; } } }; console.log(obj1); console.log(obj1.hello()); // 'Hello world' obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak()); // 'woof!' obj2
Possui funções de seta
As funções de seta se comportam de maneira diferente das funções regulares. Lembre-se: ao acessar
this no método de um objeto, essa palavra-chave corresponde ao objeto ao qual o método pertence. No entanto, isso não se aplica às funções de seta. Em vez disso,
this em tais funções refere-se ao contexto global (o objeto de
window ). Considere o seguinte código que pode ser executado no console do navegador.
var objReg = { hello: function() { return this; } }; var objArrow = { hello: () => this }; objReg.hello();
Se, intrigado com o problema em questão, observe o
MDN , você poderá encontrar informações de que as funções de seta têm uma forma mais curta de escrita do que expressões funcionais e não estão vinculadas a suas próprias entidades,
arguments ,
super ou
new.target . As funções de seta são mais adequadas para uso como funções comuns, em vez de métodos de objeto; elas não podem ser usadas como construtores.
Ouviremos o MDN e não usaremos funções de seta como métodos de objeto.
Usando isso em funções regulares
Quando uma função regular está no escopo global, a palavra-chave this usada nela será vinculada ao objeto
window . A seguir, é apresentado um exemplo no qual a função de
test pode ser vista como um método do objeto de
window .
function test() { console.log('hello world'); console.log(this); } test();
No entanto, se a função for executada no modo estrito, serão
undefined os caracteres
undefined , pois nesse modo as ligações padrão serão desativadas. Tente executar o exemplo a seguir no console do navegador.
function test() { 'use strict'; return this; } console.log( test() );
Chamando isso de uma função que foi declarada fora do objeto e depois atribuída como método
Considere o exemplo do objeto
dog que já conhecemos. Como método deste objeto, você pode atribuir a função
chase declarada fora dele. Não havia métodos no objeto
dog , até
foo método
foo , ao qual a função
chase foi atribuída. Se você agora chamar o método
dog.foo , a função
chase será chamada. A palavra
this chave
this , que é acessada nesta função, aponta para o objeto
dog . E a função
chase , ao tentar chamá-la como uma função independente, se comportará incorretamente, pois com essa abordagem,
this apontará para um objeto global que não possui as propriedades que nós, nessa função, acessamos por meio
this .
var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo();
Palavra-chave nova e isso
A palavra
this chave usada nas funções construtoras para criar objetos, pois permite, de maneira universal, trabalhar com muitos objetos criados usando essa função. JavaScript também possui funções construtoras padrão com as quais, por exemplo, você pode criar objetos do tipo
Number ou
String . Funções semelhantes, determinadas pelo programador por conta própria, permitem criar objetos cuja composição de propriedades e métodos é definida por eles mesmos.
Como você já entendeu, eu gosto de cães, portanto descreveremos uma função construtora para criar objetos como
Dog que contêm algumas propriedades e métodos.
function Dog(breed, name, friends){ this.breed = breed; this.name = name; this.friends = friends; this.intro = function() { console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`); return this; }; }
Quando uma função construtora é chamada usando a
new palavra-chave, ela aponta para um novo objeto que, usando o construtor, é fornecido com propriedades e métodos.
Veja como trabalhar com construtores JavaScript padrão.
var str = new String('Hello world'); var str2 = 'Hello world';
Agora vamos trabalhar com a recém-criada função construtora
Dog .
// Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro(); // Hi, my name is Chester and I'm a beagle console.log(chester); // Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ}
Aqui está outro exemplo de uso de funções construtoras.
var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() { console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City();
Sobre a importância da nova palavra-chave
Ao chamar a função construtora usando a
new palavra-chave, a
this aponta para um novo objeto que, depois de algum trabalho, será retornado dessa função. A palavra
this chave
this situação é muito importante. Porque O fato é que, com sua ajuda, é possível, usando uma única função construtora, criar muitos objetos do mesmo tipo.
Isso nos permite dimensionar o aplicativo e reduzir a duplicação de código. Para entender a importância desse mecanismo, pense em como as contas de mídia social são organizadas. Cada conta pode ser uma instância de um objeto criado usando a função de construtor
Friend . Cada um desses objetos pode ser preenchido com informações exclusivas do usuário. Considere o seguinte código.
// - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){ // , , this // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } // Friend, new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); // greeting john john.greeting = sayHello; // console.log( john.greeting() ); // , sayHello() console.log( sayHello() ) ;
Sumário
De fato, o uso da
this no JavaScript não se limita aos exemplos descritos acima. Portanto, uma série desses exemplos pode incluir o uso das funções de
call ,
apply e
bind . Como este material é destinado a iniciantes e tem o objetivo de explicar o básico, não abordamos aqui. No entanto, se você já formou um entendimento inicial
this , poderá descobrir facilmente esses métodos. O principal é lembrar que, se você não consegue entender algo da primeira vez, não pare de aprender, praticar, ler materiais sobre o tópico em que está interessado. Em um deles, você certamente encontrará algo (algum tipo de frase bem-sucedida, por exemplo) que ajudará a entender o que você não conseguia entender antes.
Caros leitores! Você teve dificuldade para entender a palavra-chave this em JavaScript?