“Isto” em javascript é uma das perguntas mais importantes e frequentes em javascript.

Muitas vezes, devido à má compreensão do conceito, tendemos a escrever e encontrar bugs em nosso software. Neste artigo vamos tentar desmistificar este tema.

Para decidir a vinculação de “isto”, existem algumas regras que precisamos entender. Então, antes de pular para responder, apenas olhe e pense como a função está sendo invocada ou chamada.
Vou listar as regras que facilitarão a decisão do “Vinculação” disso.

Tipo de ligação “This”

Vinculação padrão:

Quando chamamos ou invocamos uma função normalmente, a regra de vinculação padrão será aplicada. Por padrão, no caso da “janela” do navegador, consulte isso.

Vamos entender por um exemplo

function foo(){
   console.log(this);  
    function bar(){
     console.log(this);
   } 
  bar()
}
foo()
// both of the console statement will print the window.
//because , here functions are invoked normally.
// even bar is being called inside function foo.

Ligação implícita:

O segundo tipo de vinculação é a vinculação “implícita”. Você se lembra de alguma vez em que chamou a função com (.) (ponto)? como foo.bar(). Sim, isso é chamado de ligação implícita. Neste caso, “this” refere-se ao objeto de chamada.

function foo(){
  console.log(this)
}
const obj = {foo: foo}
obj.foo() // prints obj as this

function foo(){
   console.log(this); 

  function bar(){
     console.log(this);
   }  
   bar()
}
const obj = {foo: foo}
obj.foo() // what do you think? function bar will print?

Mas lembre-se, o que aprendemos no ponto 1, que se a função estiver sendo chamada normalmente, não importa onde esteja definida e onde esteja sendo chamada, “this” sempre se referirá ao “Default Binding”.

então aqui, foo tem “obj” como este , porque obj está chamando. Mas “bar” ainda está sendo invocado normalmente, então para bar(), “this” ainda é “window”.

A prioridade da vinculação implícita é maior do que a vinculação padrão .

Ligação Explícita:

Quando invocamos qualquer função usando “call”, “apply” ou “bind” , então é uma ligação explícita. Porque aqui estamos passando “este” objeto explicitamente.

function foo(){
   console.log(this)
}
const obj = {name: 'Javascript'}
foo.call(obj) // here we are passing obj as "thisArg" so now foo has "obj" as 
//this binding

A prioridade da vinculação explícita é ainda maior do que a vinculação implícita. Por exemplo:

function foo(){
   console.log(this)
}
const obj = {name: 'Javascript', foo: foo}
const obj1 = {name: 'HackerNoon'}
obj.foo.call(obj1) // Here "call" has more precedence over (.) dot. 
// so now foo has obj1 as this binding

O que você acha que a saída seria para o exemplo abaixo?

function foo(){
   console.log(this)
}
const obj = {name: 'Javascript', foo: foo}
const obj1 = {name: 'HackerNoon'}
obj.foo.call(null)

Nova vinculação:

Quando invocamos qualquer função com o “novo” teclado, muitas coisas acontecem sob o capô.

1. Um novo objeto em branco é criado.
2. o protótipo deste objeto está vinculado ao protótipo da função construtora
3. executa a função construtora, vinculando o objeto “recém-criado” como “este”
4. obj é retornado, se nada mais estiver sendo retornado

function Foo(bar1, bar2) {
  
  this.bar1 = bar1;
  this.bar2 = bar2;
  console.log(this)
}
const obj = new Foo('bar1', 'bar2')

A precedência da "nova" vinculação é ainda maior do que a vinculação "explícita" ou "implícita". por exemplo:

function Foo(bar1, bar2){
   this.bar1 = bar1;
   this.bar2 = bar2;
   console.log(this)
}
const obj = {foo: Foo}
new obj.foo('bar1', 'bar2') 
//output : {bar1: 'baar1', bar2: 'bar2'}

Função de seta (ES6):

A função de seta se comporta um pouco diferente da função normal. As regras que discutimos até agora não funcionam para a função Arrow.

A função de seta não possui sua própria ligação “this”, portanto, ela pega “this” do ambiente mais próximo que possui essa ligação e, se não houver tal env. “este” sempre se refere a “janela” no navegador para a função de seta .

function foo(){
    const es6 = () => console.log(this);
    function normal(){console.log(this)};
    es6();
    normal();
}
foo()

vamos mudar a forma como “foo” está sendo chamado.

function foo(){
    const es6 = () => console.log(this); // obj
    function normal(){console.log(this)}; // window
    es6();
    normal();
}
const obj = {foo: foo}
obj.foo()

So when deciding the “this” for arrow function, just look , if outside environment has any “this” binding , if yes then that’s the this binding for es6 function, if not then “window” would be the answer in browser context

const obj = {foo: () => console.log(this)}
obj.foo()

Faça uma pausa, a regra de ligação implícita não funcionará aqui, porque foo agora é a função es6.

já que não há outra ligação , porque foo não está dentro de nenhuma função normal que tenha seu próprio “this”.
A ligação de “this” é “window” por enquanto.

Portanto, em sort , quando tivermos que verificar “this”, observe como a função está sendo invocada, não onde a função está definida.