Método de llamada de función JavaScript()

Tabla de contenido

Mostrar tabla de contenidos

Reutilización de métodos

Con el método call(), puedes escribir un método que pueda usarse en diferentes objetos.

Todas las funciones son métodos

En JavaScript todas las funciones son métodos de objeto.

Si una función no es un método de un objeto JavaScript, es una función del objeto global (ver capítulo anterior).

El siguiente ejemplo crea un objeto con 3 propiedades, nombre, apellido, nombre completo.

Ejemplo

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

// This will return "John Doe":
person.fullName();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example creates an object with 3 properties (firstName, lastName, fullName).</p>
<p>The fullName property is a method:</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>

En el ejemplo anterior, este se refiere al objeto persona.

this.firstName significa la propiedad firstName de this.

Igual que:

this.firstName significa la propiedad firstName de persona.

¿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 método JavaScript call()

El método call() es un método predefinido Método JavaScript.

Se puede utilizar para invocar (llamar) a un método. con un objeto propietario como argumento (parámetro).

Con call(), un objeto puede utilizar un método que pertenece a otro objeto.

Este ejemplo llama al método fullName de persona y lo utiliza en persona1:

Ejemplo

const person = {
    fullName: function() {
    return this.firstName + " " + this.lastName;
    }
}
const person1 = {
  firstName:"John",
    lastName: "Doe"
  }
const person2 = {
  firstName:"Mary",
    lastName: "Doe"
}

// This will return "John Doe":
  
  person.fullName.call(person1);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person1); 
</script>

</body>
</html>

Este ejemplo llama al método fullName de persona y lo utiliza en persona2:

Ejemplo

const person = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}
const person1 = {
  firstName:"John",
    lastName: "Doe"
  }
const person2 = {
    firstName:"Mary",
    lastName: "Doe"
}

// This will return "Mary Doe"
  person.fullName.call(person2);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person2:</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person2); 
</script>

</body>
</html>

El método call() con argumentos

El método call() puede aceptar argumentos:

Ejemplo

const person = {
    fullName: function(city, country) {
    return this.firstName + " " + this.lastName 
  + "," + city + "," + country;
    }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}

document.getElementById("demo").innerHTML = person.fullName.call(person1, "Oslo", "Norway"); 
</script>

</body>
</html>