El código dentro de una función
de JavaScript se ejecutará cuando "algo" lo invoque.
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.
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.
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:
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>
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.
este
no es una variable. Es una palabra clave. No puede cambiar el valor de this
.
El tutorial de JavaScript este
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
:
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.
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):
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
:
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.
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:
// 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.