Explore este puntero de puntero en JavaScript

Explore este puntero de puntero en JavaScript

En primer lugar, debe decirse que este punto no se puede determinar cuando se define la función. Solo cuando se ejecuta la función puede este punto a quién es este punto. De hecho, esto finalmente apunta al objeto que lo llama (hay algunos problemas en esta oración, y explicaremos por qué hay problemas más adelante. Aunque la mayoría de los artículos en Internet dicen esto, aunque no habrá problemas para entenderlo en muchos casos, en realidad es inexacto comprenderlo, por lo que no puede resolverlo cuando lo entienda). Luego discutiré este tema en profundidad a continuación.

¿Por qué aprender esto? Si ha aprendido la programación funcional y la programación orientada a objetos, debe saber qué hacer. Si no lo ha aprendido, no tiene que leer este artículo por el momento. Por supuesto, si está interesado, también puede leerlo. Después de todo, esto es algo que debe ser dominado en JS.

Ejemplo 1:

 function a () {var user = "Dream Chasing"; console.log (this.user); // console indefinido.log (this); // ventana} a ();

Según lo que dijimos anteriormente, esto finalmente apunta al objeto que lo llama. La función A aquí realmente es señalada por el objeto de la ventana, y el siguiente código puede probarlo.

 function a () {var user = "Dream Chasing"; console.log (this.user); // console indefinido.log (this); // Window} Window.a ();

Al igual que el código anterior, Alert es en realidad una propiedad de la ventana y también se señala por ventana.

Ejemplo 2:

 var o = {user: "Chasing Dreams", fn: function () {console.log (this.user); // Persiguiendo sueños}} o.fn ();

Esto aquí apunta a Object O, porque lo llamas FN y lo ejecuta a través de O.Fn (), por lo que el punto natural es el objeto o. Me gustaría enfatizar nuevamente aquí que este punto no se puede decidir cuando se crea la función, y solo se puede decidir cuándo se llama. Quien lo llame señalará a quién, debe resolver esto.

De hecho, el ejemplo 1 y el ejemplo 2 no son lo suficientemente precisos. El siguiente ejemplo puede anular la teoría anterior.

Si desea comprender esto a fondo, debe mirar los próximos ejemplos

Ejemplo 3:

 var o = {user: "Catching Dreams", fn: function () {console.log (this.user); // Catching Dreams}} Window.o.fn ();

Este código es casi el mismo que el código anterior, pero ¿por qué señala esto a la ventana? Si sigue la teoría anterior, este punto al objeto que lo llama. Déjame decir algo más aquí. Windows es un objeto global en JS. La variable que creamos en realidad agrega atributos a la ventana, por lo que puede usar la ventana para apuntar el objeto O aquí.

No explicaré por qué este código anterior no apunta a la ventana. Veamos otro código.

 var o = {a: 10, b: {a: 12, fn: function () {console.log (this.a); // 12}}} obfn ();

Esto también es señalado por Object O, pero esto no lo ejecuta, por lo que definitivamente dirá que lo que dije al principio está mal. En realidad, no lo es, es solo que era inexacto al principio. A continuación, agregaré una oración. Creo que puedes entender a fondo el problema al que esto señala.

Caso 1: Si hay esto en una función, pero un objeto no lo llama en el nivel anterior, entonces esto apunta a la ventana. Lo que debe explicarse aquí es que en la versión estricta de JS, esto apunta a la ventana, pero no discutiremos el problema de la versión estricta aquí. Si quieres saber, puedes buscar en línea solo.

Caso 2: Si hay esto en una función y esta función es llamada por un objeto en el nivel anterior, entonces esto apunta al objeto en el nivel anterior.

Caso 3: Si hay esto en una función, esta función contiene múltiples objetos. Aunque esta función es llamada por el objeto más externo, esto solo apunta al objeto en el siguiente nivel. El ejemplo 3 puede probar que si no lo cree, sigamos mirando algunos ejemplos a continuación.

 var o = {a: 10, b: {// a: 12, fn: function () {console.log (this.a); // indefinido}}} obfn ();

Aunque no hay atributo A en el objeto B, esto también apunta al objeto B, porque esto solo apuntará a su objeto anterior, independientemente de si hay algo que esto quiere en este objeto.

Hay otro caso especial, Ejemplo 4:

 var o = {a: 10, b: {a: 12, fn: function () {console.log (this.a); // console indefinido.log (this); // ventana}}} var j = obfn; j ();

Esto señala la ventana aquí, ¿no está un poco confundido? De hecho, es porque no entiendes una oración, lo cual también es crucial.

Esto siempre apunta al objeto que lo llama por último, lo que significa quién lo llama cuando se ejecuta. En el Ejemplo 4, aunque la función FN se hace referencia por el objeto B, no se ejecuta al asignar FN a la variable J, por lo que finalmente apunta a la ventana, que es diferente del ejemplo 3. Ejemplo 3 ejecuta directamente FN.

En realidad, esto es solo eso, pero el puntaje será diferente en diferentes circunstancias. El resumen anterior es un pequeño error en cada lugar, y no se puede decir que sea un error, pero la situación será diferente en diferentes entornos, por lo que no puedo explicarlo claramente a la vez, por lo que solo puede experimentarla lentamente.

Versión del constructor esto:

 función fn () {this.user = "Chasing Dreams";} var a = new fn (); console.log (a.user); // persiguiendo sueños

La razón por la cual el objeto A puede señalar que el usuario en la función fn aquí es porque la nueva palabra clave puede cambiar la dirección de esto y señalar esto al objeto a. ¿Por qué digo que A es un objeto? Porque usar la nueva palabra clave es crear una instancia de objeto. Comprendiendo esta oración, puede pensar en nuestro ejemplo 3. Usamos la variable A para crear una instancia de FN (equivalente a copiar una FN en el objeto a). En este momento, se acaba de crear y no se ejecuta. La llamada a esta función fn es el objeto A, por lo que esto es naturalmente objeto a. Entonces, ¿por qué hay un usuario en Object FN? Porque ha copiado una función FN en el objeto A, y usar la nueva palabra clave es equivalente a copiar una copia.

Además de lo anterior, también podemos cambiar la dirección de esto por nosotros mismos. Para cambiar la dirección de esto por nosotros mismos, consulte el resumen de los métodos de llamada, aplicar y vincular en JavaScript, lo que explica en detalle cómo cambiamos manualmente la dirección de esto.

Actualizar un pequeño problema cuando estos encuentros regresan

 function fn () {this.user = 'Dream Chaser'; devolver {}; } var a = new fn; console.log (a.user); //indefinido

Mira a otro

 function fn () {this.user = 'Dream Chaser'; Función de retorno () {};} var a = new fn; console.log (a.user); //indefinido

Llegar de nuevo

 función fn () {this.user = 'Catching Dreams'; return 1;} var a = new fn; console.log (a.user); // Catching Dreams 'Function fn () {this.user =' Catching Dreams '; return indefinido;} var a = new fn; console.log (a.user); // Catching Dreams '

¿Qué significa?

Si el valor de retorno es un objeto, entonces esto apunta al objeto devuelto. Si el valor de retorno no es un objeto, esto todavía apunta a una instancia de la función.

 function fn () {this.user = 'crayh'; return indefinido;} var a = new fn; console.log (a); // fn {user: "Certer '}

Otro punto es que aunque NULL también es un objeto, esto todavía apunta a una instancia de esa función aquí, porque NULL es más especial.

 function fn () {this.user = 'zhunting dreams'; return null;} var a = new fn; console.log (a.user); // sueños zhunting

Suplementos de puntos de conocimiento:

1. El valor predeterminado en la versión estricta ya no es ventana, sino indefinida.

2. El nuevo operador cambiará el problema de señalización de la función esto. Aunque lo hemos explicado anteriormente, no hemos discutido este tema en profundidad. Raramente se menciona en Internet, por lo que es necesario hablar de ello aquí.

 función fn () {this.num = 1;} var a = new fn (); console.log (a.num); // 1

¿Por qué señala esto a A? Primero, la nueva palabra clave creará un objeto vacío, y luego se llamará automáticamente a un método de aplicación de función para señalar esto a este objeto vacío. De esta manera, esta función dentro de la función será reemplazada por este objeto vacío.