JavaScript isso

Índice

    Mostrar índice

Exemplo

const person = {
    firstName: "John",
  lastName : "Doe",
    id       : 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

O que é isto?

Em JavaScript, a palavra-chave this refere-se a um objeto.

Qual objeto depende de como este está sendo invocado (usado ou chamado).

A palavra-chave this refere-se a diferentes objetos dependendo de como é usada:

  • Em um método de objeto, this refere-se ao objeto.

  • Sozinho, isto refere-se ao objeto global.

  • Em uma função, this refere-se ao objeto global.

  • Em uma função, no modo estrito, isso é indefinido.

  • Em um evento, this refere-se ao elemento que recebeu o evento.

  • Métodos como call(), apply() e bind() pode referir isto a qualquer objeto.

Observação

isso não é uma variável. É uma palavra-chave. Você não pode alterar o valor de isto.

isso em um método

Quando usado em um método de objeto, this refere-se ao objeto.

No exemplo no topo desta página, this refere-se ao objeto person.

Porque o método fullName é um método do objeto person.

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

isso sozinho

Quando usado sozinho, this refere-se ao objeto global.

Porque isso está sendo executado no escopo global.

Em uma janela do navegador, o objeto global é [object Window]:

Exemplo

let x = this;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>

<p id="demo"></p>

<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

No modo estrito, quando usado sozinho, this também se refere ao objeto global:

Exemplo

 "use strict";
let x = this;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>

<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

isso em uma função (padrão)

Em uma função, o objeto global é a ligação padrão para this.

Em uma janela do navegador, o objeto global é [object Window]:

Exemplo

function myFunction() {
    return this;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

isso em uma função (estrita)

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

Portanto, quando usado em uma função, no modo estrito, isso é indefinido.

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In a function, by default, <b>this</b> refers to the global object.</p>

<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

isto em manipuladores de eventos

Em manipuladores de eventos HTML, this refere-se ao elemento HTML que recebeu o evento:

Exemplo

 <button onclick="this.style.display='none'">
  Click to 
  Remove Me!
</button>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

Vinculação de método de objeto

Nestes exemplos, este é o objeto pessoa:

Exemplo

const person = {
    firstName  : "John",
    lastName   : "Doe",
    id         : 5566,
    myFunction : function() {
    return this;
  }
};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>

</body>
</html>

Exemplo

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + 
this.lastName;
  }
};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

ou seja, this.firstName é a propriedade firstName de this (o objeto person).

Vinculação de função explícita

Os métodos call() e apply() são métodos JavaScript predefinidos.

Ambos podem ser usados para chamar um método de objeto com outro objeto como argumento.

Veja também:

O método de chamada de função()

O método da função apply()

O método da função bind()

O exemplo abaixo chama person1.fullName com person2 como argumento, this refere-se a person2, mesmo que fullName seja um método de person1:

Exemplo

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

const person2 = {
    firstName:"John",
    lastName: "Doe",
}

// Return "John Doe":
person1.fullName.call(person2);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

<p id="demo"></p>

<script>
const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person2 = {
  firstName:"John",
  lastName: "Doe",
}

let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Empréstimo de função

Com o método bind(), um objeto pode pegar emprestado um método de outro objeto.

Este exemplo cria 2 objetos (pessoa e membro).

O objeto membro pega emprestado o método fullname do objeto person:

Exemplo

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

Esta Precedência

Para determinar a qual objeto este se refere; use a seguinte precedência de ordem.

Precedence

Objeto

1

vincular()

2

aplicar() e chamar()

3

Método de objeto

4

Âmbito global

isso está em uma função que está sendo chamada usando bind()?

isso está em uma função que está sendo chamada usando apply()?

isto está em uma função sendo chamada usando call()?

isso está em uma função de objeto (método)? <p>isto está em uma função no escopo global.