Invocação de função JavaScript

Índice

Mostrar índice

O código dentro de uma função JavaScript será executado quando "algo" o invocar.

Invocando uma função JavaScript

O código dentro de uma função não é executado quando a função é definida.

O código dentro de uma função é executado quando a função é invocada.

É comum usar o termo "chamar uma função" em vez de "invocar uma função".

Também é comum dizer "chamar uma função", "iniciar uma função" ou "executar uma função".

Neste tutorial, usaremos invoke, porque um A função JavaScript pode ser invocada sem ser chamada.

Invocando uma função como uma função

Exemplo

function myFunction(a, b) {
  
  return a * b;
}
myFunction(10, 2);           // 
  Will return 20

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>

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

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

</body>
</html>

A função acima não pertence a nenhum objeto. Mas em JavaScript existe é sempre um objeto global padrão.

Em HTML, o objeto global padrão é a própria página HTML, portanto a função acima "pertence" ao Página HTML.

Em um navegador, o objeto da página é a janela do navegador. A função acima torna-se automaticamente uma função de janela.

Observação

Essa é uma maneira comum de invocar uma função JavaScript, mas não é uma prática muito boa.
Variáveis, métodos ou funções globais podem facilmente criar conflitos de nomes e bugs no objeto global.

myFunction() e window.myFunction() são a mesma função:

Exemplo

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);     // Will also return 20

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Global functions automatically become window methods. Invoking myFunction() is the same as invoking window.myFunction().</p>

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

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
</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 isso 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 Objeto Global

Quando uma função é chamada sem um objeto proprietário, o valor de this torna-se o objeto global.

Em um navegador web, o objeto global é a janela do navegador.

Este exemplo retorna o objeto window como o valor de this:

Exemplo

let x = myFunction();
           // x will be the window object

function myFunction() {
  return this;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>

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

<script>
let x = myFunction();
function myFunction() {
  return this;
}
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Invocar uma função como uma função global faz com que o valor de this seja o objeto global.
Usar o objeto window como uma variável pode facilmente travar seu programa.

Invocando uma função como método

Em JavaScript você pode definir funções como métodos de objetos.

O exemplo a seguir cria um objeto (myObject), com dois propriedades (firstName e lastName) e um método (nome completo):

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>myObject.fullName() will return John Doe:</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>

O método fullName é uma função. A função pertence a o objeto. myObject é o proprietário da função.

A coisa chamada this é o objeto que "possui" o código JavaScript. Neste caso, o valor de this é meuObject.

Teste-o! Altere o método fullName para retornar o valor de este:

Exemplo

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

// This will return [object Object] (the owner object)
myObject.fullName();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>The value of <b>this</b>, in an object method, is the owner object.</p>

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

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

</body>
</html>

Invocar uma função como um método de objeto faz com que o valor de this ser o próprio objeto.

Invocando uma função com um construtor de função

Se uma invocação de função for precedida pela palavra-chave new, é uma invocação de construtor.

Parece que você criou uma nova função, mas como as funções JavaScript são objetos você realmente cria um novo objeto:

Exemplo

// This is a function constructor:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
  this.lastName  = arg2;
}

// This creates a new object
const myObj = new myFunction("John", "Doe");

// This will return "John"
myObj.firstName;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>In this example, myFunction is a function constructor:</p>

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

<script>
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

const myObj = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = myObj.firstName; 
</script>

</body>
</html>

Uma invocação de construtor cria um novo objeto. O novo objeto herda o propriedades e métodos de seu construtor.

A palavra-chave this no construtor não possui um valor.
O valor de this será o novo objeto criado quando a função for invocada.