JavaScript palabra clave esto para principiantes

La autora del material, cuya traducción publicamos hoy, dice que cuando trabajaba en contabilidad, allí se usaban términos claros, cuyos significados son fáciles de encontrar en el diccionario. Pero después de comenzar a programar y, en particular, JavaScript, comenzó a encontrar conceptos cuyas definiciones ya no se pueden encontrar en los diccionarios. Por ejemplo, esto se refiere a la palabra clave this . Ella recuerda el momento en que se encontró con objetos JS y funciones de constructor que usaban esta palabra clave, pero no fue tan fácil llegar a su significado exacto. Ella cree que otros principiantes enfrentan problemas similares, especialmente aquellos que no han trabajado en programación antes. Aquellos que quieran aprender JavaScript tendrán que lidiar con this todos modos. Este material está destinado a ayudar a todos a ayudar con esto.

Que es esto

Les traigo a mi atención mi propia definición de this . This es una palabra clave utilizada en JavaScript que tiene un significado especial, dependiendo del contexto en el que se utiliza.

La razón por la que this causa tanta confusión para los novatos es porque el contexto de this cambia dependiendo de su uso.

This puede considerarse una palabra clave dinámica. Me gusta cómo se revela el concepto de "contexto" en este artículo de Ryan Morr. Según él, el contexto es siempre el valor de this , que se refiere a un objeto que "posee" el código que se está ejecutando actualmente. Sin embargo, el contexto relacionado con this no es el mismo que el contexto de ejecución.

Entonces, cuando usamos la palabra clave this , de hecho, nos referimos a algún objeto con su ayuda. Hablemos de qué es este objeto, después de examinar algunos ejemplos.

Situaciones cuando esto apunta a un objeto de ventana

Si intenta acceder a this en el ámbito global, estará vinculada al contexto global, es decir, al objeto de window en el navegador.

Cuando se utilizan funciones que están disponibles en el contexto global (esto las distingue de los métodos de objeto), la this en ellas apuntará al objeto de window .

Intente ejecutar este código, por ejemplo, en la consola del navegador:

 console.log(this); //     Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } //   myFunction(); //      Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} 

Usando esto dentro de un objeto

Cuando this usa dentro de un objeto, esta palabra clave se refiere al objeto mismo. Considera un ejemplo. Suponga que creó un objeto dog con métodos y lo llamó en uno de sus métodos. Cuando this usa dentro de este método, esta palabra clave representa el objeto dog .

 var dog = { name: 'Chester', breed: 'beagle', intro: function(){   console.log(this); } }; dog.intro(); //      dog       // {name: "Chester", breed: "beagle", intro: ƒ} //    breed:"beagle" //    intro:ƒ () //    name:"Chester" //    __proto__:Object 

Esto y objetos anidados

Aplicar this en objetos anidados puede crear cierta confusión. En tales situaciones, vale la pena recordar que esta palabra clave se refiere al objeto en cuyo método se utiliza. Considera un ejemplo.

 var obj1 = { hello: function() {   console.log('Hello world');   return this; }, obj2: {     breed: 'dog',     speak: function(){           console.log('woof!');           return this;       }   } }; console.log(obj1); console.log(obj1.hello());  //  'Hello world'   obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak());  //  'woof!'   obj2 

Funciones de flecha características

Las funciones de flecha se comportan de manera diferente a las funciones normales. Recuerde: al acceder a this en el método de un objeto, esta palabra clave corresponde al objeto al que pertenece el método. Sin embargo, esto no se aplica a las funciones de flecha. En cambio, this en tales funciones se refiere al contexto global (el objeto de window ). Considere el siguiente código que se puede ejecutar en la consola del navegador.

 var objReg = { hello: function() {   return this; } }; var objArrow = {   hello: () => this }; objReg.hello(); // ,   ,  objReg objArrow.hello(); //   Window! 

Si, desconcertado por el problema en cuestión, mira MDN , puede encontrar información de que las funciones de flecha tienen una forma más corta de escritura que las expresiones funcionales y no están vinculadas a sus propias entidades, arguments , super o new.target . Las funciones de flecha son más adecuadas para su uso como funciones ordinarias, en lugar de métodos de objeto; no pueden usarse como constructores.

Escucharemos MDN y no utilizaremos funciones de flecha como métodos de objeto.

Usando esto en funciones regulares

Cuando una función regular está en alcance global, la palabra clave utilizada en ella estará vinculada al objeto de la window . El siguiente es un ejemplo en el que la función de test se puede ver como un método del objeto de window .

 function test() { console.log('hello world'); console.log(this); } test(); // hello world // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} 

Sin embargo, si la función se ejecuta en modo estricto, entonces se escribirá undefined en este , ya que en este modo los enlaces predeterminados están deshabilitados. Intente ejecutar el siguiente ejemplo en la consola del navegador.

 function test() { 'use strict'; return this; } console.log( test() ); //  undefined,    Window 

Llamar a esto desde una función que se declaró fuera del objeto y luego se asignó como método

Considere el ejemplo del objeto dog que ya conocemos. Como método de este objeto, puede asignar la función de chase declarada fuera de él. No había métodos en el objeto dog , hasta que creamos el método foo , al que se asignó la función de chase . Si ahora llama al método dog.foo , se dog.foo la función de chase . La palabra clave this , a la que se accede en esta función, apunta al objeto dog . Y la función de chase , al intentar llamarla como una función independiente, se comportará incorrectamente, ya que con este enfoque apuntará a un objeto global que no tiene las propiedades a las que, en esta función, accedemos a través de this .

 var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo(); //    Beagles loves chasing rabbits. chase(); //      

Palabra clave nueva y esto

La palabra clave this se usa en las funciones de constructor que se usan para crear objetos, ya que permite, de manera universal, trabajar con muchos objetos creados con dicha función. JavaScript también tiene funciones de constructor estándar con las que, por ejemplo, puede crear objetos de tipo Number o String . Funciones similares, determinadas por el programador por su cuenta, le permiten crear objetos cuya composición de propiedades y métodos se establece por sí mismos.

Como ya entendió, me gustan los perros, por lo que describiremos una función de constructor para crear objetos como Dog que contienen algunas propiedades y métodos.

 function Dog(breed, name, friends){   this.breed = breed;   this.name = name;   this.friends = friends;   this.intro = function() {       console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`);       return this;   }; } 

Cuando se llama a una función de constructor usando la new palabra clave, this apunta a un nuevo objeto que, usando el constructor, se suministra con propiedades y métodos.

Aquí se explica cómo trabajar con constructores JavaScript estándar.

 var str = new String('Hello world'); /*******    ,     ,  ,     str2 .        ,   JavaScript   ,   ,    ,      .        .  ,  ,  ,   ,           . *******/ var str2 = 'Hello world'; //    , ,  ,        

Ahora trabajemos con la función de constructor Dog recién creada.

 //      Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro();        //  Hi, my name is Chester and I'm a beagle console.log(chester);   //  Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ} 

Aquí hay otro ejemplo del uso de funciones de constructor.

 var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() {   console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City(); //     console.log(phoenix); //       phoenix.sentence(); //  I live in Phoenix, AZ. var spokane = new City('Spokane', 'WA'); console.log(spokane); //    spokane.sentence(); //  I live in Spokane, WA. 

Sobre la importancia de la nueva palabra clave

Cuando se llama a la función de constructor usando la new palabra clave, this apunta a un nuevo objeto que, después de un poco de trabajo, será devuelto por esta función. La palabra clave this en esta situación es muy importante. Por qué La cuestión es que, con su ayuda, es posible, utilizando una sola función de constructor, crear muchos objetos del mismo tipo.

Esto nos permite escalar la aplicación y reducir la duplicación de código. Para comprender la importancia de este mecanismo, piense en cómo se organizan las cuentas de redes sociales. Cada cuenta puede ser una instancia de un objeto creado usando la función de constructor Friend . Cada uno de estos objetos se puede llenar con información de usuario única. Considere el siguiente código.

 // - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){  //   ,  ,    this  // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } //          Friend,    new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); //    greeting  john john.greeting = sayHello; //     console.log( john.greeting() ); //   ,  sayHello()       console.log( sayHello() ) ; 

Resumen

De hecho, el uso de la this en JavaScript no se limita a los ejemplos descritos anteriormente. Por lo tanto, una serie de estos ejemplos podría incluir el uso de las funciones call , apply y bind . Dado que este material está destinado a principiantes y tiene como objetivo explicar los conceptos básicos, no los tocamos aquí. Sin embargo, si ya ha formado una comprensión inicial de this , puede descubrir fácilmente estos métodos. Lo principal es recordar que si no puede entender algo la primera vez, no deje de aprender, practique, lea materiales sobre el tema que le interesa. En uno de ellos, seguramente se encontrará con algo (algún tipo de frase exitosa, por ejemplo) que lo ayudará a comprender lo que antes no podía entender.

Estimados lectores! ¿Ha tenido dificultades para comprender esta palabra clave en JavaScript?