Métodos JavaScript

Í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 é isso?

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

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

Veja também:

O tutorial de JavaScript este

Métodos JavaScript

Os métodos JavaScript são ações que podem ser executadas em objetos.

Um método JavaScript é uma propriedade que contém uma função definição.

firstName

John

lastName

Corça

age

50

eyeColor

azul

fullName

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

Métodos são funções armazenadas como propriedades de objetos.

Acessando Métodos de Objeto

Você acessa um método de objeto com a seguinte sintaxe:

objectName.methodName()

Você normalmente descreverá fullName() como um método do objeto person e fullName como uma propriedade.

A propriedade fullName será executada (como uma função) quando for invocada com().

Este exemplo acessa o método fullName() de um objeto pessoa:

Exemplo

name = person.fullName();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating and using an object method.</p>
<p>A method is actually a function definition stored as a property value.</p>

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

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

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

Se você acessar a propriedade fullName, sem(), ela retornará a definição da função:

Exemplo

name = person.fullName;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition stored as a property value.</p>
<p>If you access it without (), it will return the function definition:</p>

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

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

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

Adicionando um método a um objeto

Adicionar um novo método a um objeto é fácil:

Exemplo

 person.name = function () {
  return this.firstName + " " + this.lastName;
};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>

Usando métodos integrados

Este exemplo usa o método toUpperCase() do objeto String, para converter um texto para maiúsculas:

let message = "Hello world!";
let x = message.toUpperCase();

O valor de x, após a execução do código acima será:

HELLO WORLD!

Exemplo

person.name = function () {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>