Método de chamada de função JavaScript()

Índice

Reutilização de métodos

Com o método call(), você pode escrever um método que pode ser usado em diferentes objetos.

Todas as funções são métodos

Em JavaScript todas as funções são métodos de objeto.

Se uma função não é um método de um objeto JavaScript, é uma função do objeto JavaScript. objeto global (veja o capítulo anterior).

O exemplo abaixo cria um objeto com 3 propriedades, nome, sobrenome, nome completo.

Exemplo

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

// This will return "John Doe":
person.fullName();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example creates an object with 3 properties (firstName, lastName, fullName).</p>
<p>The fullName property is a method:</p> 

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

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

No exemplo acima, isto refere-se ao objeto pessoa.

this.firstName significa a propriedade firstName de this.

Igual a:

this.firstName significa a propriedade firstName de person.

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 isto.

Veja também:

O tutorial de JavaScript este

O método JavaScript call()

O método call() é um método predefinido Método JavaScript.

Pode ser usado para invocar (chamar) um método com um objeto proprietário como argumento (parâmetro).

Com call(), um objeto pode usar um método pertencente a outro objeto.

Este exemplo chama o método fullName de pessoa, usando-o em pessoa1:

Exemplo

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

// This will return "John Doe":
  
  person.fullName.call(person1);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person1); 
</script>

</body>
</html>

Este exemplo chama o método fullName de pessoa, usando-o em pessoa2:

Exemplo

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

// This will return "Mary Doe"
  person.fullName.call(person2);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person2:</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person2); 
</script>

</body>
</html>

O método call() com argumentos

O método call() pode aceitar argumentos:

Exemplo

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

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

person.fullName.call(person1, "Oslo", "Norway");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

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

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

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

document.getElementById("demo").innerHTML = person.fullName.call(person1, "Oslo", "Norway"); 
</script>

</body>
</html>