Let’s talk about THIS

LA TRAMPA

Pero no todo es blanco o negro. Hay que vigilar mucho cómo están definidas las funciones que usan this, ya que podemos meternos sin quererlo en trampas…

Concepto de propietario

El concepto de propietario puede inducir a errores, porque asumimos que si un objeto tiene definidas unas propiedades y métodos, éstos ya están delimitados y harán referencia a mi objeto. Pero fijaos en el siguiente ejemplo:

console.log(miObject.fullName)

PATRONES DE INVOCACIÓN

Aquí es donde entran en el juego los patrones de invocación, que nos van a permitir inicializar el this de distintas maneras.

Invocación como método

En nuestro ejemplo anterior lo que haríamos sería crear un método:

Console.log(miObject.fullName()) // Aida Albarrán

Invocación como función. Método bind y Arrow Functions

Nos referimos a la invocación de una función que no forma parte de un objeto. Cuando invocamos una función de este tipo, el contexto de this es el contexto global, puesto que la función no forma parte del objeto, como hemos dicho.

miObjectFunctionPattern.fullName("Albarrán");
console.log(miObjectFunctionPattern.name) // Aida
miObjectFunctionPattern.fullName("Albarrán");
console.log(miObjectFunctionPattern.name) // Aida Albarrán

Invocación como constructor

En este punto, conviene recordar que Javascript es un lenguaje de herencia prototipada. Todo son objetos y cada objeto es creado usando otro objeto como prototipo. Esto implica que, por tanto, tengan las características propias de los objetos, como son métodos y propiedades.

console.log(myObjectFunction.name) // myObjectFunction
console.log(myObjectFunction.toString()) // function (parameter1, parameter2) {
console.log(`Mi función imprime ${parameter1} y ${parameter2}`);
}
var otherObject = new MyObjectFunction();
otherObject.showFullName(); // Imprime nombre completo: Aida Albarrán
var objectWithClass = new myClassObjectFunction()
objectWithClass.showFullName(); // Imprime nombre completo: Aida Albarrán

Invocación con call y apply

Como hemos mencionado antes, hay varios métodos que están dentro de cada objeto de forma intrínseca, como son estos dos.

otherObject.showFullName.call(myOtherObject)
Imprime nombre completo: María Gutiérrez

Conclusión

This es un poderoso amigo, pero que si no lo controlamos puede convertirse en tu enemigo.

--

--

If something does not work, ACT. Yes, you! That’s why I’m now #Developer at @vmware . Formerly @kairos_ds .Constantly absorbing knowledge. Proud #Adalaber

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aida

Aida

If something does not work, ACT. Yes, you! That’s why I’m now #Developer at @vmware . Formerly @kairos_ds .Constantly absorbing knowledge. Proud #Adalaber