Explicación detallada del uso de esto en JavaScript

Usé esto durante la entrevista hace unos días. El entrevistador dijo que mi comprensión era un poco parcial. Volví a leer el libro y algunos blogs, e hice algunas pruebas. Descubrí que mi comprensión era realmente incorrecta.

1. Variables globales

Debería ser el más utilizado. Llame a esto en la función, y esta es en realidad una variable global

 valor var = "0"; function mei () {var value = "1"; console.log (this.Value); // 0 console.log (valor); // 1} mei ();

La salida es 0 porque esto apunta al global

2. Constructor

Este es el uso con el que estoy más familiarizado. Use esto en el constructor. Después de un nuevo objeto nuevo, esto apunta a este nuevo objeto.

 value var = "ventana"; función mei () {this.value = 1; this.show = function () {console.log (this.value)}} var m = new mei (); console.log (M.Value); // 1 M.Show (); // 1

Puede ver que la salida es 1 en lugar de la ventana. Se puede ver que debido al constructor, esto aquí ha señalado un nuevo objeto en lugar de una variable global.

3.Call y aplique

Pida prestado los ejemplos de mi llamada y aplique el blog directamente

 var p = "456"; función f1 () {this.p = "123"; } function f2 () {console.log (this.p); } f2 (); // 456 f2.call (f1 ()); // 123 f2.apply (f1 ()); // 123

La salida de la primera línea es fácil de entender. Esto apunta a lo global. El 123 se debe a que después de usar llamadas o aplicar, esto en F2 señala F1 y P en F1 es 123. Haga clic en la publicación del blog para obtener más detalles.

4. La función se llama como método de un objeto (donde cometí un error)

En ese momento, me pedí que escribiera un objeto con varios métodos. Definí una variable global en mi mente, y luego lo llamé en el método del objeto. El entrevistador me preguntó qué es esto. Dije que debería ser ventana, porque usé este método muy poco, y pensé que solo nuevo o llamado cambiaría la dirección de esto, por lo que dijo que estaba mal y me pidió que volviera y lo viera yo mismo. Ahora lo he probado, estoy realmente equivocado. Publicar el código

 Value var = "padre"; function mei () {} mei.value = "niño"; mei.get = function () {console.log (this.value)}; mei.show = function () {console.log (valor)}; mei.get (); // niño mei.show (); //padre

Dado que Get se llama como un método de MEI, esto aquí apunta a Mei.Value So Output Child

En cuanto al padre, entiendo de esta manera. La función señalada por Show se define en el entorno global. Debido a la cadena de alcance, no se encuentra ningún valor en el programa, por lo que defino su entorno y lo encuentro. Esto encuentra el valor global. Si hay un error de comprensión aquí, ¡espero que un amigo pueda señalarlo!