Invocación de función de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


El código dentro de una función de JavaScript se ejecutará cuando "algo" lo invoque.


Invocar una función de JavaScript

El código dentro de una función no se ejecuta cuando la función está definida.

El código dentro de una función se ejecuta cuando se invoca la función.

Es común utilizar el término "llamar a una función" en lugar de "invocar una función".

También es común decir "invocar una función", "iniciar una función" o "ejecutar una función".

En este tutorial, usaremos invoke, porque un La función JavaScript se puede invocar sin ser llamada.


Invocar una función como función

Ejemplo

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

Pruébelo usted mismo →

<!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>


La función anterior no pertenece a ningún objeto. Pero en JavaScript hay es siempre un objeto global predeterminado.

En HTML, el objeto global predeterminado es la propia página HTML, por lo que la función anterior "pertenece" al Página HTML.

En un navegador, el objeto de la página es la ventana del navegador. La función de arriba se convierte automáticamente en una función de ventana.

Nota

Esta es una forma común de invocar una función de JavaScript, pero no es una muy buena práctica.
Las variables, métodos o funciones globales pueden crear fácilmente conflictos de nombres y errores en el objeto global.

myFunction() y window.myFunction() es la misma función:

Ejemplo

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

Pruébelo usted mismo →

<!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>



¿Qué es esto?

En JavaScript, la palabra clave this se refiere a un objeto.

Qué objeto depende de cómo se invoca (usa o llama) este.

La palabra clave this se refiere a diferentes objetos dependiendo de cómo se use:

  • En un método de objeto, this se refiere al objeto.

  • Por sí solo, este se refiere al objeto global.

  • En una función, this se refiere al objeto global.

  • En una función, en modo estricto, este es indefinido.

  • En un evento, este se refiere al elemento que recibió el evento.

  • Métodos como call(), apply() y bind() puede referir este a cualquier objeto.

Nota

este no es una variable. Es una palabra clave. No puede cambiar el valor de this.

Ver también:

El tutorial de JavaScript este



El objeto global

Cuando se llama a una función sin un objeto propietario, el valor de this se convierte en el objeto global.

En un navegador web, el objeto global es la ventana del navegador.

Este ejemplo devuelve el objeto de ventana como el valor de this:

Ejemplo

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

function myFunction() {
  return this;
}

Pruébelo usted mismo →

<!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 una función como función global hace que el valor de this sea el objeto global.
Usar el objeto de ventana como variable puede bloquear fácilmente su programa.


Invocar una función como método

En JavaScript puedes definir funciones como métodos de objeto.

El siguiente ejemplo crea un objeto (myObject), con dos propiedades (nombre y apellido), y un método (nombre completo):

Ejemplo

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

Pruébelo usted mismo →

<!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>


El método fullName es una función. La función pertenece a el objeto. myObject es el propietario de la función.

Lo llamado this, es el objeto que "posee" el código JavaScript. En este caso el valor de this es miObjeto.

¡Pruébalo! Cambie el método fullName para devolver el valor de this:

Ejemplo

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

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

Pruébelo usted mismo →

<!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>


Al invocar una función como método de objeto, se genera el valor de this ser el objeto mismo.


Invocar una función con un constructor de funciones

Si una invocación de función va precedida de la palabra clave new, es una invocación de constructor.

Parece que creas una nueva función, pero como las funciones de JavaScript son objetos en realidad creas un nuevo objeto:

Ejemplo

// 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;

Pruébelo usted mismo →

<!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>


Una invocación de constructor crea un nuevo objeto. El nuevo objeto hereda el propiedades y métodos de su constructor.

La palabra clave this en el constructor no tiene un valor.
El valor de this será el nuevo objeto creado cuando se invoque la función.