esto y ScopeChain en EcmaScript

Hola Habr!

En un artículo anterior, examinamos la teoría general de OOP aplicada a EcmaScript y la falacia popular de los desarrolladores novatos con respecto a las diferencias entre OOP en JS y lenguajes clásicos.

Hoy hablaremos de otros dos conceptos EcmaScript igualmente importantes, a saber, la relación de la entidad con el contexto de ejecución ( esta es la conexión) y la relación de la entidad con el contexto generador ( ScopeChain ).

¡Entonces comencemos!

esto

En las entrevistas en respuesta a la pregunta: "Cuéntanos más sobre esto ". Los desarrolladores principiantes, por regla general, dan respuestas muy vagas: " este es el objeto" antes del punto "que se usó para llamar al método", " este es el contexto en el que se llamó a la función", etc.

De hecho, la situación con este concepto, que es central para EcmaScript, es algo más complicada. Vamos a resolverlo en orden.

Digamos que tenemos un programa JavaScript que tiene variables declaradas globalmente; funciones globales; funciones locales (declaradas dentro de otras funciones), funciones devueltas de funciones.

const a = 10; const b = 20; const x = { a: 15, b: 25, } function foo(){ return this.a + this.b; } function bar () { const a = 30; return a + b; } function fooBaz(){ function test () { return this.a + this.b; } return test(); } function fooBar() { const a = 40; const b = 50; return function () { return a + b; } } fooBar()(); 

Al transferir el control al código ejecutable, se realiza una entrada en el contexto de ejecución. Código ejecutable: este es cualquier código que ejecutamos en un momento dado, puede ser un código global o un código de cualquier función.

El contexto de ejecución es una abstracción que tipifica y delimita el código. Desde el punto de vista de esta abstracción, el código se divide en global (cualquier secuencia de comandos conectada, secuencias de comandos en línea) y código de función (el código de las funciones anidadas no pertenece al contexto de las funciones principales).

Hay un tercer tipo: EvalCode. En este artículo, lo descuidamos.

Lógicamente, el conjunto de contextos de ejecución es una pila que funciona según el principio de último en entrar, primero en salir (lifo). La parte inferior de la pila es siempre el contexto global, y la parte superior es el ejecutable actual. Cada vez que se llama a una función, se realiza una entrada en su contexto. Cuando una función se completa, su contexto termina. Los contextos gastados se eliminan de la pila de forma secuencial y en orden inverso.

Echa un vistazo al código de arriba. Tenemos una llamada a la función fooBar en código global. En la función fooBar, devolvemos una función anónima que llamamos inmediatamente. Los siguientes cambios ocurren con la pila: un contexto global entra en él - cuando se llama a fooBar, su contexto se pone en la pila - se termina fooBar , devuelve una función anónima y se elimina de la pila - se llama a una función anónima , su contexto se pone en la pila - una función anónima cumple, devuelve un valor y su contexto se elimina de la pila: al final del script, el contexto global se elimina de la pila.

El contexto de ejecución se puede representar condicionalmente como un objeto. Una de las propiedades de este objeto será el entorno léxico (LO).

El entorno léxico contiene:

• todas las declaraciones de variables de contexto
• todas las declaraciones de funciones
• todos los parámetros formales de la función (si estamos hablando del contexto de funciones)

Al ingresar al contexto de ejecución, el intérprete escanea el contexto. Todas las declaraciones de variables y declaraciones de funciones se elevan hasta el comienzo del contexto. Las variables se crean de forma indefinida y las funciones están completamente listas para usar.

¡Esto también es una propiedad del contexto de ejecución, pero no del contexto en sí mismo, como responden algunos entrevistadores novatos! esto se define al ingresar al contexto y permanece sin cambios hasta el final de la vida útil del contexto (hasta que el contexto se elimine de la pila).

En el contexto de ejecución global, esto está determinado por el modo estricto : cuando el modo estricto está desactivado, contiene un objeto global (en el navegador se aproxima al nivel superior en el objeto de la ventana), con 'uso estricto' no está definido.

esto en el contexto de funciones: ¡la pregunta es mucho más interesante!
esto en funciones está determinado por la persona que llama y depende de la sintaxis de la llamada. Por ejemplo, como sabemos, hay métodos que permiten que esto se arregle rígidamente cuando se llama ( llamar , aplicar ) y un método que le permite crear un contenedor con "arreglado esto" ( enlace ). En estas situaciones, declaramos esto explícitamente y no puede haber ninguna duda sobre su definición.

Con una llamada de función normal, ¡la situación es mucho más complicada!

Uno de los tipos integrados de EcmaScript, ReferenceType , nos ayudará a comprender cómo se fija esto en las funciones. Este es uno de los tipos internos disponibles a nivel de implementación. Lógicamente, es un objeto con dos propiedades base (una referencia a un determinado objeto base para el que se devuelve un ReferenceType), propertyName (una representación de cadena del identificador del objeto para el que se devuelve un ReferenceType).

ReferenceType se devuelve para todas las declaraciones de variables, declaraciones de funciones y referencias de propiedades (este es el caso que nos interesa desde el punto de vista de entender esto).

La regla para definir esto para funciones se llama de la manera habitual:
Si ReferenceType está a la izquierda de los corchetes de activación de la función, la base de este ReferenceType se coloca en this función. Si cualquier otro tipo está a la izquierda de los corchetes, entonces this es un objeto global o undefined (en realidad null , pero dado que nulo no tiene un valor específico desde el punto de vista de ecmascript, entonces se convierte en un objeto global, una referencia a la cual es igual a undefined dependiendo del modo estricto).

Veamos un ejemplo:

 const x = 0; const obj = { x: 10, foo: function() { return this.x; } } obj.foo();//  10 ..    ReferenceType  base     obj const test = obj.foo;//       test();//  0 ..  test()   .test(),..  base    ,       0. 

Creo que el método de definición se ilustra claramente. Ahora considere algunos casos menos obvios.

Expresiones Funcionales

Volvamos a nuestro ReferenceType por un segundo. Este tipo tiene un método GetValue incorporado que devuelve el tipo verdadero del objeto recibido a través de ReferenceType. En la zona de expresión, GetValue siempre se activa.

Un ejemplo:

 (function (){ return this;// this     undefined    strict mode })() 

Esto se debe al hecho de que GetValue siempre se activa en la zona de expresión. GetValue devuelve un tipo de función, y a la izquierda de los corchetes de activación no hay un tipo de referencia. Recuerde nuestra regla para determinar esto : si cualquier otro tipo está a la izquierda de los corchetes, entonces un objeto global se coloca en this o undefined (en realidad null , pero dado que nulo no tiene un cierto valor desde el punto de vista de ecmascript, entonces se convierte en un objeto global , el enlace al cual puede ser igual a indefinido dependiendo del modo estricto) .

Las zonas de expresión son: asignación (=), operadores || u otros operadores lógicos, operador ternario, inicializador de matriz, lista separada por comas.

 const x = 0; const obj = { x: 10, foo: function() { return this.x; } } obj.foo(); //        //  ? (obj.foo)(); // ,    , GetValue   // ? (obj.foo = obj.foo)(); //        GetValue,     Fuction,   ReferenceType,   0   (   this) //  ||    ,    ..? (obj.foo || obj.foo)();// 0    ,     //  [obj.foo][0]();// 0    ,     // .. 

Situación idéntica en expresiones funcionales con nombre. Incluso con una llamada recursiva a este objeto global o undefined

esto anida funciones llamadas en el padre

También una situación importante!

 const x = 0; function foo() { function bar(){ return this.x; } return bar(); } const obj = {x:10}; obj.test = foo; obj.test();// undefined 

Esto se debe a que la llamada a bar() equivalente a la llamada a LE_foo.bar , y el objeto del entorno léxico LE_foo.bar indefinido como este.

Funciones de constructor

Como escribí arriba:

esto en funciones está determinado por la persona que llama y depende de la sintaxis de la llamada.

Invocamos funciones de constructor utilizando la nueva palabra clave. La peculiaridad de este método de activación de funciones es que se llama al método de función interna [[construcción]] , que realiza ciertas operaciones (¡el mecanismo para crear entidades por parte de los diseñadores se discutirá en el segundo o tercer artículo sobre OOP!) Y llama al método interno [[llamada]] , que anula en esta instancia creada de la función constructora.

Cadena de alcance

La cadena de alcance también es una propiedad del contexto de ejecución como este. Es una lista de objetos de los entornos léxicos del contexto actual y todos los contextos generadores. Es en esta cadena que la búsqueda de variables se produce al resolver nombres de identificadores.

Nota: esto asocia una función con un contexto de ejecución y ScopeChain con contextos secundarios.

La especificación establece que ScopeChain es una matriz:

  SC = [LO, LO1, LO2,..., LOglobal]; 

Sin embargo, en algunas implementaciones, como JS, la cadena de alcance se implementa a través de listas vinculadas .

Para comprender mejor ScopeChain, discutiremos el ciclo de vida de las funciones. Se divide en la fase de creación y la fase de ejecución.

Cuando se crea una función, se le asigna la propiedad interna [[ALCANCE]] .
En [[ALCANCE]] , se registra una cadena jerárquica de objetos de entornos léxicos de contextos superiores (generadores). Esta propiedad permanece sin cambios hasta que el recolector de basura destruye la función.

¡Presta atención! [[SCOPE]] , a diferencia de ScopeChain, es una propiedad de la función en sí misma, no de su contexto.

Cuando se llama a una función, su contexto de ejecución se inicializa y se llena. El contexto se fija con ScopeChain = LO (de la función en sí) + [[SCOPE]] (cadena jerárquica de contextos que afectan a LO).

Resolución de nombres de identificadores : sondeo secuencial de objetos LO en la cadena ScopeChain de izquierda a derecha. El resultado es un ReferenceType cuya propiedad base apunta al objeto LO en el que se encontró el identificador, y PropertyName será una representación de cadena del nombre del identificador.

¡Así se organiza el cierre debajo del capó! Un cierre es esencialmente el resultado de una búsqueda en ScopeChain para todas las variables cuyos identificadores están presentes en la función.

 const x = 10; function foo () { return x; } (function (){ const x = 20; foo();// 10 ..     <b><i>[[SCOPE]]</i></b> foo          })() 

El siguiente ejemplo ilustra el ciclo de vida [[ALCANCE]] .

 function foo () { const x = 10; const y = 20; return function () { return [x,y]; } } const x = 30; const bar = foo();//   ,   foo    bar();// [10,20] .. [[SCOPE]]    foo          

Una excepción importante es la función constructora . Para este tipo de función, [[ALCANCE]] siempre apunta a un objeto global.

Además, no olvide que si uno de los eslabones de la cadena ScopeChain tiene un prototipo, la búsqueda también se llevará a cabo en el prototipo.

Conclusión

Vamos a presentar las ideas clave en teoría:

• esta es la relación de la entidad con el contexto de ejecución
• ScopeChain es la relación de una entidad con todos los contextos de desove
• this y ScopeChain son propiedades de contexto de ejecución
• la persona que llama determina estas funciones y depende de la sintaxis de la llamada
• ScopeChain es el entorno léxico del contexto actual + [[Alcance]]
• [[Alcance]]: esta es una propiedad de la función en sí misma, contiene una cadena jerárquica de entornos léxicos de contextos generadores

Espero que el artículo haya sido útil. Hasta futuros artículos, amigos!