Cuando se ejecuta el código JavaScript, el entorno de ejecución es muy importante. Hay varias situaciones diferentes:
Código global : el entorno predeterminado para la primera ejecución de su código.
Código de función: siempre que se ingresa una función.
Código de evaluación: cuando se ejecuta el texto dentro de eval.
Puede leer muchos recursos sobre el alcance en Internet. El propósito de este artículo es facilitar las cosas. Imaginemos el término contexto de ejecución como el entorno / alcance del código ejecutado actualmente. Dicho lo suficiente, veamos ahora un ejemplo de código que contiene contexto global y funcional.
mamicode.com, code fan
es un ejemplo muy simple, tenemos un contexto global rodeado de bordes morados y tres contextos de funciones diferentes enmarcados en verde, azul y naranja respectivamente. Solo el otro contexto puede acceder al contexto global (variables).
Puede tener cualquier número de contextos de función. Cada vez que llama a una función para crear un nuevo contexto, se crea un ámbito privado. No se puede acceder directamente a ninguna variable declarada dentro de la función fuera del ámbito de función actual. En el ejemplo anterior, las funciones pueden acceder a declaraciones de variables fuera del contexto actual, pero no se puede acceder a las variables internas / declaraciones de funciones en contextos externos. ¿Por qué sucede esto? ¿Cómo se interpreta exactamente el código? El intérprete de JavaScript en el navegador de
pila de contexto de ejecución
se implementa como un solo hilo. Esto significa que solo puede suceder una cosa a la vez, y otros textos o eventos se colocarán en una cola llamada pila de ejecución. La siguiente figura es una vista abstracta de una pila de un solo subproceso:
mamicode.com, abanicos de código
Ya sabemos que cuando el navegador carga por primera vez su script, ingresará al contexto de ejecución global de forma predeterminada. Si llama a una función en su código global, el tiempo de su programa ingresará a la función llamada y usará un nuevo contexto de ejecución y empujará el contexto recién creado a la parte superior de la pila de ejecución.
Si llama a otras funciones dentro de la función actual, aquí ocurrirá lo mismo. El flujo de ejecución del código ingresa a la función interna, crea un nuevo contexto de ejecución y lo empuja a la parte superior de la pila de ejecución. El navegador siempre ejecutará el contexto de ejecución en la parte superior de la pila. Una vez que se complete la ejecución de la función de contexto actual, se abrirá desde la parte superior de la pila y dará el control de contexto a la pila actual. El siguiente ejemplo muestra el proceso de llamada de la pila de ejecución de una función recursiva:
mamicode.com, code fan
(function foo (i) {
if (i === 3) {
return;
}
else {
foo (++ i);
}
} (0 ));
mamicode.com, code fan
mamicode.com, code fan
Este código se llama a sí mismo tres veces, más uno por cada valor de i. Cada vez que se llama a la función foo, se creará un nuevo contexto de ejecución. Una vez que se completa la ejecución del contexto, se abrirá desde la parte superior de la pila y devolverá el control al contexto a continuación hasta que solo quede el contexto global.
Hay 5 puntos clave para recordar acerca de la pila de ejecución (pila de llamadas):
subproceso único.
Ejecución síncrona.
Un contexto global.
Contexto de funciones ilimitado.
Cada vez que se llama a la función, se crea un nuevo contexto de ejecución, que incluye llamarse a sí mismo.
Detalles del contexto de ejecución
Ahora sabemos que cada vez que se llama a una función, se creará un nuevo contexto de ejecución. Sin embargo, dentro del intérprete de JavaScript, cada llamada al contexto de ejecución se divide en dos etapas: la
etapa de creación [cuando se llama a la función, pero antes de que se ejecute ningún código interno]:
Crear cadena de alcance para
crear variables, funciones y parámetros.
Encuentre el valor de "esto".
Fase de activación / ejecución de código:
asigne valores variables y referencias de funciones, interprete / ejecute código.
Cada contexto de ejecución se puede abstraer como un objeto con tres propiedades:
mamicode.com, código fan executeContextObj
= {
scopeChain: {/ * objeto variable (variableObject) + objeto variable de todos los contextos de ejecución padre * /},
variableObject: {/ * Argumentos / parámetros de función, variables internas y declaraciones de función * /},
esto: {}
}
mamicode.com,
activación de ventiladores de código / objetos variables [AO / VO]
executeContextObj se crea cuando se llama a la función, pero antes de que se ejecute la función real . Esta es la primera fase que mencionamos anteriormente, la fase de creación. En esta etapa, el intérprete escanea los parámetros o argumentos pasados a la función, declaraciones de funciones locales y declaraciones de variables locales, y crea un objeto executeContextObj. El resultado del escaneo completará la creación del objeto variable.
Aquí hay una pseudo visión general de cómo el intérprete evalúa el código:
Encuentre el código que llama a la función.
Antes de ejecutar el código de función, cree un contexto de ejecución.
Ingrese la fase de creación:
inicialice la cadena de alcance:
cree objetos variables:
Cree objetos de argumentos, verifique el contexto, inicialice los nombres y valores de los parámetros y cree una copia de la referencia.
Declaración de función
para el contexto de exploración: para cada función encontrada, cree un atributo en el objeto variable, para ser preciso el nombre de la función, que tiene una referencia a la función en la memoria.
Si el nombre de la función ya existe, el puntero de referencia se reescribirá.
Escanee la declaración de la variable en el contexto:
para cada declaración de variable encontrada, cree un atributo en el objeto variable, es decir, el nombre de la variable e inicialice el valor de la variable como indefinido.
Si el nombre de la variable ya existe en el objeto variable, no Hará cualquier cosa y continuará escaneando.
Encuentre el valor de "esto" dentro del contexto.
Fase de activación / ejecución del código:
Ejecute / interprete el código de función en el contexto actual y asigne valores variables a medida que el código se ejecuta línea por línea.
Veamos un ejemplo:
mamicode.com, código fan
function foo (i) {
var a = 'hello';
var b = function privateB () {
};
function c () {
}
}
foo (22);
mamicode.com , Code fan
Al llamar a foo (22), el estado de creación es el siguiente:
mamicode.com, code fan
fooExecutionContext = {
scopeChain: {...},
variableObject: {
argumentos: {
0: 22,
longitud: 1
},
i: 22,
c: puntero a la función c ()
a: indefinido,
b: indefinido
},
esto: {... }
}
mamicode.com, abanicos de código Como
puede ver, el estado de creación es responsable de procesar los nombres de los atributos definidos, no asignarles valores específicos y procesar los parámetros formales / reales. Una vez que se completa la fase de creación, el flujo de ejecución ingresa a la función y a la fase de activación / ejecución de código, vea cómo se ve la ejecución de la función:
mamicode.com, code fan
fooExecutionContext = {
scopeChain: {...},
variableObject: {
argumentos: {
0: 22,
longitud: 1
},
i: 22,
c: puntero a la función c ()
a: 'hola',
b: puntero a la función privateB ()
},
esto: {...}
}
mamicode.com,
elevación
Puede encontrar muchos recursos en Internet que definen los términos de elevación de JavaScript. Explicar las variables y las declaraciones de funciones se promueven a la parte superior del alcance de la función. Sin embargo, nadie explicó los detalles de por qué sucedió esto. Después de aprender el nuevo conocimiento sobre cómo el intérprete crea objetos de amor para usted, es fácil entender por qué. Vea el siguiente ejemplo:
mamicode.com, code fan
(function () {
console.log (typeof foo); // function pointer
console.log (typeof bar); // undefined
var foo = 'hello',
bar = function ( ) {
return 'world';
};
function foo () {
return 'hello';
}
} ())
;? mamicode.com, code fan
Podemos responder la siguiente pregunta:
¿Por qué podemos acceder a ella antes de declarar foo?
Si seguimos la fase de creación, sabemos que la variable se ha creado durante la fase de activación / ejecución del código. Entonces, antes de que la función comience a ejecutarse, foo ya está definido en el objeto activo.
Foo fue declarado dos veces, ¿por qué aparece foo como una función en lugar de indefinido o una cadena?
Aunque foo se declaró dos veces, sabemos que la función se ha creado en el objeto activo desde la etapa de creación. Este proceso ocurre antes de que se cree la variable, y si el nombre del atributo ya existe en el objeto activo, solo actualizamos la referencia.
Por lo tanto, la referencia a la función foo () se crea primero en el objeto activo, y cuando explicamos var foo, vemos que el nombre del atributo foo ya existe, por lo que el código no hace nada y continúa la ejecución.
¿Por qué el valor de la barra no está definido?
La barra es en realidad una variable, pero el valor de la variable es una función, y sabemos que las variables se crean durante la fase de creación, pero se inicializan a indefinidas.
Resumen
Espero que ahora comprenda cómo el intérprete de JavaScript ejecuta su código. Comprender el contexto de ejecución y la pila lo ayudará a comprender el razonamiento detrás de por qué su código se interpreta como un valor diferente de lo que esperaba originalmente.
¿Desea saber que la sobrecarga de la operación interna del intérprete es demasiado grande o la necesidad de su conocimiento de JavaScript? ¿Conocer el contexto de ejecución te ayuda a escribir mejor JavaScript?
Desea conocer el principio de funcionamiento interno del intérprete, que requiere demasiado espacio y el conocimiento necesario de JavaScript. Conocer el contexto de ejecución puede ayudarlo a escribir un mejor código JavaScript.
Nota: Algunas personas han estado preguntando acerca de cierres, devoluciones de llamadas, retrasos, etc. Mencionaré en el próximo artículo que se presta más atención a los aspectos relacionados con la cadena de alcance del contexto de ejecución del dominio.
https://www.cnblogs.com/hanmlp52/category/1727703.html
https://www.cnblogs.com/hanmlp52/category/1727705.html
https://www.cnblogs.com/hanmlp52/category/1727708. html
https://www.cnblogs.com/hanmlp52/category/1727709.html
https://www.cnblogs.com/hanmlp52/category/1727712.html
https://www.cnblogs.com/hanmlp52/category/1727714 .html
https://www.cnblogs.com/hanmlp52/category/1727716.html
https://www.cnblogs.com/hanmlp52/category/1727718.html
https://www.cnblogs.com/hanmlp52/category/ 1727720.html
https://www.cnblogs.com/hanmlp52/category/1727722.html
https://www.cnblogs.com/hanmlp52/category/1727724.html
https://www.cnblogs.com/hanmlp52/category /1727727.html
https://www.cnblogs.com/hanmlp52/category/1727729.html
https://www.cnblogs.com/hanmlp52/category/1727730.html
https://www.cnblogs.com/hanmlp52/category/1727733. html
https://www.cnblogs.com/hanmlp52/category/1727736.html
https://www.cnblogs.com/hanmlp52/category/1727737.html
https://www.cnblogs.com/hanmlp52/category/1727740 .html
https://www.cnblogs.com/hanmlp52/category/1727743.html
https://www.cnblogs.com/hanmlp52/category/1727745.html
https://www.cnblogs.com/hanmlp52/category/ 1727748.html
https://www.cnblogs.com/hanmlp52/category/1727749.html
https://www.cnblogs.com/hanmlp52/category/1727751.html
https://www.cnblogs.com/hanmlp52/category /1727754.html
https://www.cnblogs.com/hanmlp52/category/1727756.html
https://www.cnblogs.com/hanmlp52/category/1727757.html
https://www.cnblogs.com/hanmlp52/category/1727761. html
https://www.cnblogs.com/hanmlp52/category/1727763.html
https://www.cnblogs.com/hanmlp52/category/1727765.html
https://www.cnblogs.com/hanmlp52/category/1727767 .html
https://www.cnblogs.com/hanmlp52/category/1727769.html
https://www.cnblogs.com/hanmlp52/category/1727771.html
https://www.cnblogs.com/hanmlp52/category/ 1727774.html
https://www.cnblogs.com/hanmlp52/category/1727776.html
https://www.cnblogs.com/hanmlp52/category/1727778.html
https://www.cnblogs.com/hanmlp52/category /1727781.html
https://www.cnblogs.com/hanmlp52/category/1727783.html
https://www.cnblogs.com/hanmlp52/category/1727786.html
https://www.cnblogs.com/hanmlp52/category/1727787. html
https://www.cnblogs.com/hanmlp52/category/1727790.html
https://www.cnblogs.com/hanmlp52/category/1727793.html
https://www.cnblogs.com/hanmlp52/category/1727795 .html
https://www.cnblogs.com/hanmlp52/category/1727797.html
https://www.cnblogs.com/hanmlp52/category/1727799.html
https://www.cnblogs.com/hanmlp52/category/ 1727801.html
https://www.cnblogs.com/hanmlp52/category/1727802.html
https://www.cnblogs.com/hanmlp52/category/1727806.html
https://www.cnblogs.com/hanmlp52/category /1727807.html
https://www.cnblogs.com/hanmlp52/category/1727808.html
https://www.cnblogs.com/hanmlp52/category/1727811.html
https://www.cnblogs.com/hanmlp52/category/1727813. html
https://www.cnblogs.com/hanmlp52/category/1727815.html
https://www.cnblogs.com/hanmlp52/category/1727817.html
https://www.cnblogs.com/hanmlp52/category/1727820 .html
https://www.cnblogs.com/hanmlp52/category/1727821.html
https://www.cnblogs.com/hanmlp52/category/1727823.html
https://www.cnblogs.com/hanmlp52/category/ 1727825.html
https://www.cnblogs.com/hanmlp52/category/1727829.html
https://www.cnblogs.com/hanmlp52/category/1727830.html
https://www.cnblogs.com/hanmlp52/category /1727832.html
https://www.cnblogs.com/hanmlp52/category/1727834.html
https://www.cnblogs.com/hanmlp52/category/1727837.html
https://www.cnblogs.com/hanmlp52/category/1727838. html
https://www.cnblogs.com/hanmlp52/category/1727840.html
https://www.cnblogs.com/hanmlp52/category/1727842.html
https://www.cnblogs.com/hanmlp52/category/1727843 .html
https://www.cnblogs.com/hanmlp52/category/1727845.html
https://www.cnblogs.com/hanmlp52/category/1727846.html
https://www.cnblogs.com/hanmlp52/category/ 1727848.html
https://www.cnblogs.com/hanmlp52/category/1727849.html
https://www.cnblogs.com/hanmlp52/category/1727850.html
https://www.cnblogs.com/hanmlp52/category /1727852.html
https://www.cnblogs.com/hanmlp52/category/1727853.html
https://www.cnblogs.com/hanmlp52/category/1727854.html
https://www.cnblogs.com/hanmlp52/category/1727856. html
https://www.cnblogs.com/hanmlp52/category/1727857.html
https://www.cnblogs.com/hanmlp52/category/1727858.html
https://www.cnblogs.com/hanmlp52/category/1727860 .html
https://www.cnblogs.com/hanmlp52/category/1727861.html
https://www.cnblogs.com/hanmlp52/category/1727862.html
https://www.cnblogs.com/hanmlp52/category/ 1727864.html
https://www.cnblogs.com/hanmlp52/category/1727865.html
https://www.cnblogs.com/hanmlp52/category/1727866.html
https://www.cnblogs.com/hanmlp52/category /1727868.html
https://www.cnblogs.com/hanmlp52/category/1727869.html
https://www.cnblogs.com/hanmlp52/category/1727870.html
https://www.cnblogs.com/hanmlp52/category/1727872. html
https://www.cnblogs.com/hanmlp52/category/1727873.html
https://www.cnblogs.com/hanmlp52/category/1727875.html
https://www.cnblogs.com/hanmlp52/category/1727876 .html
https://www.cnblogs.com/hanmlp52/category/1727877.html
https://www.cnblogs.com/hanmlp52/category/1727879.html
https://www.cnblogs.com/hanmlp52/category/ 1727880.html
https://www.cnblogs.com/hanmlp52/category/1727881.html
https://www.cnblogs.com/hanmlp52/category/1727883.html
https://www.cnblogs.com/hanmlp52/category /1727884.html
https://www.cnblogs.com/hanmlp52/category/1727885.html
https://www.cnblogs.com/hanmlp52/category/1727887.html
https://www.cnblogs.com/hanmlp52/category/1727888. html
https://www.cnblogs.com/hanmlp52/category/1727890.html
https://www.cnblogs.com/hanmlp52/category/1727891.html
https://www.cnblogs.com/hanmlp52/category/1727892 .html
https://www.cnblogs.com/hanmlp52/category/1727894.html
https://www.cnblogs.com/hanmlp52/category/1727895.html
https://www.cnblogs.com/hanmlp52/category/ 1727897.html
https://www.cnblogs.com/hanmlp52/category/1727898.html
https://www.cnblogs.com/hanmlp52/category/1727899.html
https://www.cnblogs.com/hanmlp52/category /1727901.html
https://www.cnblogs.com/hanmlp52/category/1727902.html
https://www.cnblogs.com/hanmlp52/category/1727904.html
https://www.cnblogs.com/hanmlp52/category/1727905. html
https://www.cnblogs.com/hanmlp52/category/1727907.html
https://www.cnblogs.com/hanmlp52/category/1727908.html
https://www.cnblogs.com/hanmlp52/category/1727909 .html
https://www.cnblogs.com/hanmlp52/category/1727911.html
https://www.cnblogs.com/hanmlp52/category/1727912.html
https://www.cnblogs.com/hanmlp52/category/ 1727913.html
https://www.cnblogs.com/hanmlp52/category/1727915.html
https://www.cnblogs.com/hanmlp52/category/1727916.html
https://www.cnblogs.com/hanmlp52/category /1727918.html
https://www.cnblogs.com/hanmlp52/category/1727919.html
https://www.cnblogs.com/hanmlp52/category/1727920.html
https://www.cnblogs.com/hanmlp52/category/1727922. html
https://www.cnblogs.com/hanmlp52/category/1727923.html
https://www.cnblogs.com/hanmlp52/category/1727925.html
https://www.cnblogs.com/hanmlp52/category/1727926 .html
https://www.cnblogs.com/hanmlp52/category/1727927.html
https://www.cnblogs.com/hanmlp52/category/1727929.html
https://www.cnblogs.com/hanmlp52/category/ 1727930.html
https://www.cnblogs.com/hanmlp52/category/1727932.html
https://www.cnblogs.com/hanmlp52/category/1727933.html
https://www.cnblogs.com/hanmlp52/category /1727934.html
https://www.cnblogs.com/hanmlp52/category/1727936.html
https://www.cnblogs.com/hanmlp52/category/1727937.html
https://www.cnblogs.com/hanmlp52/category/1727940. html
https://www.cnblogs.com/hanmlp52/category/1727941.html
https://www.cnblogs.com/hanmlp52/category/1727942.html
https://www.cnblogs.com/hanmlp52/category/1727943 .html
https://www.cnblogs.com/hanmlp52/category/1727945.html
https://www.cnblogs.com/hanmlp52/category/1727946.html
https://www.cnblogs.com/hanmlp52/category/ 1727948.html
https://www.cnblogs.com/hanmlp52/category/1727949.html
https://www.cnblogs.com/hanmlp52/category/1727951.html
https://www.cnblogs.com/hanmlp52/category /1727952.html
https://www.cnblogs.com/hanmlp52/category/1727953.html
https://www.cnblogs.com/hanmlp52/category/1727955.html
https://www.cnblogs.com/hanmlp52/category/1727956. html
https://www.cnblogs.com/hanmlp52/category/1727959.html
https://www.cnblogs.com/hanmlp52/category/1727960.html
https://www.cnblogs.com/hanmlp52/category/1727962 .html
https://www.cnblogs.com/hanmlp52/category/1727963.html
https://www.cnblogs.com/hanmlp52/category/1727965.html
https://www.cnblogs.com/hanmlp52/category/ 1727966.html
https://www.cnblogs.com/hanmlp52/category/1727967.html
https://www.cnblogs.com/hanmlp52/category/1727969.html
https://www.cnblogs.com/hanmlp52/category /1727970.html
https://www.cnblogs.com/hanmlp52/category/1727971.html
https://www.cnblogs.com/hanmlp52/category/1727973.html
https://www.cnblogs.com/hanmlp52/category/1727974. html
https://www.cnblogs.com/hanmlp52/category/1727976.html
https://www.cnblogs.com/hanmlp52/category/1727977.html
https://www.cnblogs.com/hanmlp52/category/1727978 .html
https://www.cnblogs.com/hanmlp52/category/1727980.html
https://www.cnblogs.com/hanmlp52/category/1727981.html
https://www.cnblogs.com/hanmlp52/category/ 1727982.html
https://www.cnblogs.com/hanmlp52/category/1727984.html
https://www.cnblogs.com/hanmlp52/category/1727985.html
https://www.cnblogs.com/hanmlp52/category /1727986.html
https://www.cnblogs.com/hanmlp52/category/1727988.html
https://www.cnblogs.com/hanmlp52/category/1727989.html
https://www.cnblogs.com/hanmlp52/category/1727991. html
https://www.cnblogs.com/hanmlp52/category/1727992.html
https://www.cnblogs.com/hanmlp52/category/1727993.html
https://www.cnblogs.com/hanmlp52/category/1727995 .html
https://www.cnblogs.com/hanmlp52/category/1727996.html
https://www.cnblogs.com/hanmlp52/category/1727998.html
https://www.cnblogs.com/hanmlp52/category/ 1727999.html
https://www.cnblogs.com/hanmlp52/category/1728000.html
https://www.cnblogs.com/hanmlp52/category/1728002.html
https://www.cnblogs.com/hanmlp52/category /1728003.html
https://www.cnblogs.com/hanmlp52/category/1728005.html
https://www.cnblogs.com/hanmlp52/category/1728006.html
https://www.cnblogs.com/hanmlp52/category/1728007. html
https://www.cnblogs.com/hanmlp52/category/1728009.html
https://www.cnblogs.com/hanmlp52/category/1728010.html
https://www.cnblogs.com/hanmlp52/category/1728012 .html
https://www.cnblogs.com/hanmlp52/category/1728013.html
https://www.cnblogs.com/hanmlp52/category/1728015.html
https://www.cnblogs.com/hanmlp52/category/ 1728016.html
https://www.cnblogs.com/hanmlp52/category/1728018.html
https://www.cnblogs.com/hanmlp52/category/1728019.html
https://www.cnblogs.com/hanmlp52/category /1728020.html
https://www.cnblogs.com/hanmlp52/category/1728022.html
https://www.cnblogs.com/hanmlp52/category/1728023.html
https://www.cnblogs.com/hanmlp52/category/1728025. html
https://www.cnblogs.com/hanmlp52/category/1728026.html
https://www.cnblogs.com/hanmlp52/category/1728027.html
https://www.cnblogs.com/hanmlp52/category/1728029 .html
https://www.cnblogs.com/hanmlp52/category/1728030.html
https://www.cnblogs.com/hanmlp52/category/1728032.html