funciones de JavaScript se pueden invocar de 4 maneras diferentes.
Cada método se diferencia en cómo this se ha inicializado.
La this Palabra clave
En JavaScript, lo que llamamos this , es el objeto que "posee" el código actual.
El valor de this , cuando se utiliza en una función, es el objeto que "posee" la función.
Tenga en cuenta que this no es una variable. Es una palabra clave. No se puede cambiar el valor de this .
Invocar una función JavaScript
Ya se ha visto que el código dentro de una función de JavaScript se ejecutará cuando "algo" lo invoca.
El código en una función no se ejecuta cuando se define la función. Se ejecuta cuando se invoca la función.
Algunas personas utilizan el término "llamar a una función" en lugar de "invocar una función".
También es bastante común decir "invocar una función", "iniciar una función", o "ejecutar una función".
En este tutorial, vamos a utilizar de invocación, porque una función de JavaScript se puede invocar sin ser llamado.
La invocación de una función como función
Ejemplo
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) will return 20
Inténtalo tú mismo " La función anterior no pertenece a ningún objeto. Pero en JavaScript siempre hay un objeto global por defecto.
En HTML el objeto global por defecto es la página HTML en sí, por lo que la función anterior "pertenece" a la página HTML.
En un explorador del objeto de página es la ventana del navegador. La función anterior se convierte automáticamente en función de la ventana.
myFunction() y window.myFunction() es la misma función:
Ejemplo
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) will also return 20
Inténtalo tú mismo " Esta es una forma común para invocar una función de JavaScript, pero no una muy buena práctica.
Las variables globales, métodos o funciones pueden fácilmente crear conflictos con los nombres y los errores en el objeto global.
El objeto global
Cuando una función se llama un objeto sin dueño, el valor de this se convierte en el objeto global.
En un navegador web al objeto global es la ventana del navegador.
En este ejemplo se devuelve el objeto ventana que el valor de this :
Ejemplo
function myFunction() {
return this;
}
myFunction(); // Will return the window object
Inténtalo tú mismo " La invocación de una función como una función global, hace que el valor de this que es el objeto global.
Utilizando el objeto de la ventana como una variable puede bloquearse fácilmente su programa.
La invocación de una función como un método
En JavaScript se puede definir como la función de los métodos de objeto.
En el siguiente ejemplo se crea un objeto ( myObject ), con dos propiedades ( firstName y lastName ), y un método ( fullName ):
Ejemplo
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
Inténtalo tú mismo " El fullName método es una función. La función pertenece al objeto. myObject es el propietario de la función.
La cosa que se llama this , es el objeto que "posee" el código JavaScript. En este caso el valor de this es myObject .
¡Pruébalo! Cambiar el fullName método para devolver el valor de this :
Ejemplo
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // Will return [object Object] (the owner object)
Inténtalo tú mismo " La invocación de una función como un método de objeto, hace que el valor de this para ser el objeto mismo.
La invocación de una función con un constructor de funciones
Si una invocación de la función es precedida con la new palabra clave, es una invocación del constructor.
Parece que se crea una nueva función, pero ya que las funciones de JavaScript son objetos que en realidad crea un nuevo objeto:
Ejemplo
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;
// Will return "John"
Inténtalo tú mismo " Una invocación constructor crea un nuevo objeto. El nuevo objeto hereda las propiedades y métodos de su constructor.
La this palabra clave en el constructor no tiene un valor.
El valor de this será el nuevo objeto creado cuando se invoca la función.
La invocación de una función con un método de función
En JavaScript, las funciones son objetos. funciones de JavaScript tienen propiedades y métodos.
call() y apply() son métodos predefinidos de función de JavaScript. Ambos métodos se pueden utilizar para invocar una función, y ambos métodos deben tener el objeto propietario como primer parámetro.
Ejemplo
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // Will return 20
Inténtalo tú mismo " Ejemplo
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
myObject =
myFunction.apply(myObject, myArray); // Will also return 20
Inténtalo tú mismo " Ambos métodos toman un objeto propietario que el primer argumento. La única diferencia es que call() toma los argumentos de la función por separado, y apply() toma los argumentos de la función en una matriz.
En modo estricto JavaScript, el primer argumento se convierte en el valor de this en la función invocada, incluso si el argumento no es un objeto.
En el modo "no estricto", si el valor del primer argumento es nulo o no definido, se reemplaza con el objeto global.
Con call() o apply() se puede establecer el valor de this , e invocar una función como un nuevo método de un objeto existente.