JavaScript es un lenguaje de secuencias de comandos que admite funciones avanzadas como la programación funcional, los cierres, la herencia basada en prototipos, etc. JavaScript parece ser fácil de comenzar al principio, pero a medida que lo usa en profundidad, en realidad es difícil dominar JavaScript, y algunos conceptos básicos son increíbles. Entre ellos, la palabra clave esto en JavaScript es un concepto relativamente confuso. En diferentes escenarios, esto se convertirá en diferentes objetos. Hay una opinión que solo dominar correctamente esta palabra clave en JavaScript puede ingresar el umbral del idioma JavaScript. En los idiomas orientados a objetos principales (como Java, C#, etc.), esto significa claro y específico, es decir, apuntando al objeto actual. Generalmente unido durante el período de compilación. Esto está obligado durante el tiempo de ejecución en JavaScript, que es la razón esencial por la cual esta palabra clave tiene múltiples significados en JavaScript.
Debido a su característica de enlace durante el tiempo de ejecución, esto en JavaScript puede ser un objeto global, un objeto actual o cualquier objeto, que depende completamente de la forma en que se llama a la función. Hay varias formas de llamar a las funciones en JavaScript:
Llamado como método de objeto;
en función Llamada;
Llamado como constructor;
Use aplicar o llamar para llamar.
Como dice el refrán, un personaje no es tan bueno como una forma, y una forma no es tan buena como una imagen. ¿Para hacer que la gente entienda mejor a qué señala JavaScript? Aquí hay una imagen para explicar:
En la imagen de arriba, lo llamo "JavaScript este árbol de decisión" (en modo no riguroso). El siguiente es un ejemplo para ilustrar cómo esta figura puede ayudarnos a juzgar esto:
Var Point = {x: 0, y: 0, Moveto: function (x, y) {this.x = this.x + x; this.y = this.y + y; }}; // Explicación del árbol de decisión: la función de punto.moveto (1,1) no se llama a nuevo, ingresa al veto, // se llama con dot (.), Y luego apunta al objeto de llamada antes .moveto, es decir, pointpoint.moveto (1,1); // Esto está vinculado al objeto actual, es decir, objeto de punto¿Es la llamada de función Point.moveto llamado con nuevo? Esto obviamente no. Entrar en la rama "No", es decir, ¿la función se llama con Dot (.)? ;
La función Point.moveto se llama con Dot (.), Es decir, ingresa a la rama "Sí", es decir, esto aquí apunta al punto de objeto antes de Point.moveto.
El diagrama de análisis de lo que este punto en el punto de la figura. La función moveto se muestra en la siguiente figura:
Veamos otro ejemplo, mire el siguiente código:
función func (x) {this.x = x; } func (5); // Esta es una ventana de objeto global, X es una variable global // Análisis de árbol de decisión: ¿Se llama la función func () con nueva? A no, ¿se llama con DOT al ingresar la función func ()? A no, esto apunta a la ventana del objeto globalx; // x => 5El proceso de determinar la función func () en "javascript este árbol de decisión" es el siguiente:
¿Se llama a FUNC (5) la llamada de función con NUEVO? Esto obviamente no. Entrar en la rama "No", es decir, ¿la función se llama con Dot (.)? ;
La función FUNC (5) no se llama con Dot (.), Es decir, ingresa a la rama "no", es decir, este punto a la ventana de variable global, entonces este.x es en realidad Window.x.
El diagrama de análisis de lo que señala esta función FUNC se muestra en la siguiente figura:
Para el método de llamar directamente en función, veamos un ejemplo complejo:
Var Point = {x: 0, y: 0, Moveto: function (x, y) {// función interna var mudx = function (x) {this.x = x; // ¿A qué apunta esto? ventana }; // La función interna var mudy = function (y) {this.y = y; // ¿A qué apunta esto? ventana }; Movex (x); movimiento (y); }}; punto.moveto (1,1); punto.x; // => 0 punto.y; // => 0 x; // => 1 y; // => 1La llamada interna real de las funciones Movex () y Movey (). El proceso de determinar esta función dentro de Movex () en el "JavaScript Este árbol de decisión" es el siguiente:
¿Se llama la llamada de función MoveX (1) con nueva? Esto obviamente no. Entrar en la rama "No", es decir, ¿la función se llama con Dot (.)? ;
La función MoveX (1) no se llama con Dot (.), Es decir, ingresa a la rama "no", es decir, esto aquí apunta a la ventana de variable global, entonces esto.x es en realidad Window.x.
Echemos un vistazo al ejemplo de una llamada de constructor:
punto de función (x, y) {this.x = x; // este ? this.y = y; // this?} var np = new Point (1,1); np.x; // 1var p = punto (2,2); px; // Error, p es un objeto vacío undefinedwindow.x; // 2El proceso de determinar esto en el "JavaScript Este árbol de decisión" en la función del punto (1,1) es el siguiente:
var np = nuevo es la llamada de punto (1,1) llamada con nueva? Esto es obviamente, ingresar a la rama "Sí", es decir, esto apunta a NP;
Entonces esto.x = 1, es decir, np.x = 1;
El proceso de determinar esto en el "JavaScript Este árbol de decisión" de la función de punto (2,2) en VAR P P = Point (2,2) es el siguiente:
¿Se llama la llamada var p = punto (2,2) con nueva? Esto obviamente no. Entrar en la rama "No", es decir, ¿la función se llama con Dot (.)? ;
¿La función de punto (2,2) no se llama con Dot (.)? Determinado como no, es decir, ingrese a la rama "no", es decir, esto aquí apunta a la ventana variable global, entonces esto.x es en realidad Window.x;
This.x = 2 significa ventana.x = 2.
Finalmente, echemos un vistazo al ejemplo de las funciones de llamadas con llamadas y aplicar:
punto de función (x, y) {this.x = x; this.y = y; this.moveto = function (x, y) {this.x = x; this.y = y; }} var p1 = nuevo punto (0, 0); var p2 = {x: 0, y: 0}; p1.moveto.apply (p2, [10, 10]); // Aplicar es en realidad P2.Moveto (10, 10) P2.x // 10El proceso de determinación de la función P1.moveto.apply (P2, [10,10]) en el "JavaScript este árbol de decisión" es el siguiente:
Sabemos que los dos métodos se aplican y llaman son extremadamente potentes, y permiten cambiar el contexto de la ejecución de la función, es decir, el objeto vinculado a esto. p1.moveto.apply (P2, [10,10]) es en realidad p2.moveto (10,10). Entonces P2.moveto (10,10) puede interpretarse como:
¿Se llama la llamada de función con nuevo? Esto obviamente no. Entrar en la rama "No", es decir, ¿la función se llama con Dot (.)? ;
La función p2.moveto (10,10) se llama con Dot (.), Es decir, ingresa a la rama "sí", es decir, esto aquí apunta al objeto P2 en P2.moveto (10,10). Antes, entonces p2.x = 10.
Con respecto al proceso del entorno de ejecución de la función JavaScript, una descripción en la biblioteca de documentos de IBM Developerworks se siente muy bien, y el extracto es el siguiente:
"Las funciones en JavaScript se pueden ejecutar como funciones ordinarias o como objetos, que es la razón principal por la que esto es tan rico. Cuando se ejecuta una función, se crea un entorno de ejecución (Ejecutivo de ejecución), y se crea todos los comportamientos de la función que ocurren en este entorno de ejecución. Cuando se crea el entorno de ejecución, JavaScript primero, se creará la variable de los argumentos, que contiene los parámetros que se pasa en este entorno de ejecución. A continuación. Inicializar la variable, primero inicializa la tabla de parámetros formales de la función, el valor es el valor correspondiente en la variable de argumentos. y su operación de asignación solo se ejecutará cuando la función se ejecuta después de que el entorno de ejecución (Ejecutivo) se cree con éxito. se crea con éxito y la función comienza a ejecutar la línea por línea, y las variables requeridas se leen desde el entorno de ejecución (ejecutivo) que se construyó antes.
Comprender este pasaje será de gran beneficio para comprender las funciones de JavaScript.