JavaScript Invocación de funciones


Las funciones de JavaScript tienen 4 formas de invocación.

La diferencia entre cada forma radica enthisla inicialización de this.


thisPalabras clave

En general, en JavaScript, this apunta al objeto actual en el momento en que se ejecuta la función.

Note Nota:thisthis es una palabra reservada, no puedes modificarthisel valor de this.

Invocar funciones de JavaScript

En capítulos anteriores hemos aprendido a crear funciones.

El código de la función se ejecuta después de que la función es invocada.


Invocar como una función

Ejemplo

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

Pruébalo »

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

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

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

myFunction() y window.myFunction() son lo mismo:

Ejemplo

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

Pruébalo »

Note Esta es una forma común de invocar funciones de JavaScript, pero no es una buena práctica de programación.
Las variables, métodos o funciones globales pueden causar errores de conflicto de nombres.

Objeto global

Cuando una función no es invocada por su propio objeto,thisel valor de this se convierte en el objeto global.

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

Este ejemplo devuelvethisel valor de this es el objeto window:

Ejemplo

function myFunction() { return this; } myFunction(); //Devuelve el objeto window

Pruébalo »

Note Invocar la función como objeto global hará quethisel valor de this se convierta en el objeto global.
Usar el objeto window como una variable puede provocar fallos en el programa.

Función invocada como método

En JavaScript puedes definir una función como método de un objeto.

El siguiente ejemplo crea un objeto (myObjectmyObject), el objeto tiene dos propiedades (firstName, lastNamefirstNameylastName), y un método (fullName).fullName):

Ejemplo

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

Pruébalo »

fullNameUn método es una función. La función pertenece a un objeto.myObjectthis es el propietario de la función.

thisthis es el objeto que posee el código JavaScript. En el ejemplo,thisel valor de this esmyObjectel objeto myObject.

¡Prueba lo siguiente! ModificafullNameel método fullName y devuelvethisel valor de this:

Ejemplo

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this; } } myObject.fullName(); //Devuelve [object Object] (el objeto propietario)

Pruébalo »

Note Invocar la función como método de un objeto hará quethisel valor de this se convierta en el propio objeto.

Invocar funciones mediante el constructor

Si antes de invocar la función se utilizanewla palabra clave new, se invoca al constructor.

Parece como si se creara una nueva función, pero en realidad las funciones de JavaScript son objetos recreados:

Ejemplo

//Constructor: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // This creates a new object var x = new myFunction("John","Doe"); x.firstName; //Devuelve "John"

Pruébalo »

La invocación del constructor crea un nuevo objeto. El nuevo objeto hereda las propiedades y métodos del constructor.

Note En el constructor,thisla palabra clave this no tiene ningún valor.
thisEl valor de this se crea cuando la invocación de la función instancia el objeto (new object).

Invocar la función como método de función

En JavaScript, las funciones son objetos. Las funciones de JavaScript tienen sus propiedades y métodos.

call()yapply()call() y apply() son métodos de función predefinidos. Ambos métodos pueden utilizarse para invocar funciones, y el primer parámetro de ambos debe ser el propio objeto.

Ejemplo

function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); //Devuelve 20

Pruébalo »

Ejemplo

function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); //Devuelve 20

Pruébalo »

Ambos métodos utilizan el propio objeto como primer parámetro. La diferencia entre ellos radica en el segundo parámetro: apply recibe un array de argumentos, es decir, combina varios argumentos en un array y lo pasa, mientras que call los pasa como parámetros de call (a partir del segundo parámetro).

En el modo estricto de JavaScript (strict mode), al invocar una función, el primer parámetro se convierte enthisel valor de this, incluso si ese parámetro no es un objeto.

En el modo no estricto de JavaScript (non-strict mode), si el valor del primer parámetro es null o undefined, se utilizará el objeto global en su lugar.

Note Mediante los métodos call() o apply() puedes establecerthisel valor de this y llamarlo como un nuevo método de un objeto existente.
Otras extensiones