Función Avanzada ③ -- (Pila de contexto de ejecución, alcance y cadena de alcance)

pila de contexto de ejecución

1. Antes de que se ejecute el código global, el motor JS creará una pila para almacenar y administrar todos los objetos de contexto de ejecución
2. Después de determinar el contexto de ejecución global (ventana), agréguelo a la pila (empuje la pila)
3. Después de crear el contexto de ejecución de la función, agréguelo a la pila (empújelo)
4. Después de que se ejecuta la función actual, el objeto en la parte superior de la pila se elimina (se extrae)
5. Cuando se ejecuta todo el código, solo queda la ventana en la pila

P.ej:

<script type="text/javascript">
  var a = 10
  var bar = function (x) {
    
    
    var b = 5
    foo(x + b)
  }
  var foo = function (y) {
    
    
    var c = 5
    console.log(a + c + y)
  }
  bar(10)
  // bar(10)
</script>

Nota: El contexto de ejecución de la función solo se crea cuando se llama a la función. No se crea cuando se define.

alcance

① Comprender

• es un "césped", un área donde se encuentra un segmento de código
• Es estático (relativo al objeto de contexto) y se determina cuando se escribe el código.

②Clasificación

• alcance global
• alcance de la función
• Sin alcance de bloque (ES6 lo tiene)

③ Función

• Aísle las variables, las variables con el mismo nombre en diferentes ámbitos no entrarán en conflicto

P.ej:

<script type="text/javascript">
/*  //没块作用域
  if(true) {
    var c = 3
  }
  console.log(c)*/

  var a = 10,
    b = 20
  function fn(x) {
    
    
    var a = 100,
      c = 300;
    console.log('fn()', a, b, c, x)   //100，20，300，10
    function bar(x) {
    
    
      var a = 1000,
        d = 400
      console.log('bar()', a, b, c, d, x)  //1000,20,300,400,200
    }

    bar(100)
    bar(200)
  }
  fn(10)
</script>

En qué ámbito, busque el ámbito actual y, si no puede encontrarlo, busque fuera.

alcance y contexto de ejecución

diferencia 1

• Fuera del ámbito global, cada función crea su propio ámbito, que se determina cuando se define la función. en lugar de cuando se llama a la función
• El contexto de ejecución global se crea después de determinar el alcance global e inmediatamente antes de que se ejecute el código js
• El contexto de ejecución de la función se crea cuando se llama a la función, antes de que se ejecute el código del cuerpo de la función.

diferencia 2

• El alcance es estático, existe mientras la función esté definida y no cambiará
• El contexto de ejecución es dinámico, se crea cuando se llama a una función y se libera automáticamente cuando finaliza la llamada a la función.

conectar

• El contexto de ejecución (objeto) está subordinado al ámbito en el que reside
• contexto global ==> alcance global
• Contexto de la función ==> dominio de uso de la función correspondiente

P.ej:

<script type="text/javascript">
  var a = 10,
    b = 20
  function fn(x) {
    
    
    var a = 100,
      c = 300;
    console.log('fn()', a, b, c, x)
    function bar(x) {
    
    
      var a = 1000,
        d = 400
      console.log('bar()', a, b, c, d, x)
    }

    bar(100)
    bar(200)
  }
  fn(10)
</script>

Corrección de la imagen de arriba: el contexto global debería ser b=20

cadena de alcance

① Comprender

• Una cadena formada por el alcance de múltiples relaciones subordinadas, su dirección es de abajo hacia arriba (de adentro hacia afuera)
• Cuando busca una variable, busca la cadena de alcance

② Encuentra la regla de búsqueda para una variable

• Encuentre la propiedad correspondiente en el contexto de ejecución bajo el alcance actual, si hay un retorno directo, de lo contrario, vaya a 2
• Encuentre el atributo correspondiente en el contexto de ejecución del alcance de nivel superior, si hay un retorno directo, de lo contrario, vaya a 3
• Realice la misma operación de 2 nuevamente, hasta que el alcance global, si no se encuentra, arroje una excepción de no encontrado

Resultados de salida como se muestra arriba:
4, 3, 2, error (d no está definido)