Ámbitos adjuntos

Olvidándome de this por un momento. El concepto de "contexto de ejecución" se llama Cierre en Javascript. El artículo de MDN lo explica bien.

Para tener una mejor idea, usemos una variable llamada a lugar de this :

 const a = 1; function foo() { //can access `a` here function bar() { //can also access `a` here } }

Estas funciones tienen acceso a los ámbitos externos donde fueron declaradas. Este es el "contexto de ejecución" , como lo llamaste, aunque esta es la terminología incorrecta para Javascript. "Ámbito" o "ámbito léxico" serían los términos correctos.

No importa dónde llame a esas funciones, aún podrán imprimir a archivo .

Pila de llamadas y montón

El artículo de MDN sobre Cierres dice lo siguiente:

Cadena de alcance de cierre
Todo cierre tiene tres alcances:

• Ámbito Local (Ámbito propio)
• Alcance de funciones externas
• Alcance global

Lo que hay que tener en cuenta sobre estos es que se establecen en el momento del análisis , NO en el momento de la ejecución .

Si bien Javascript tiene una pila de llamadas y un montón, estos no tienen nada que ver con el alcance o los cierres. Los alcances son una propiedad de la función y siguen siendo los mismos desde el momento en que se analiza por primera vez Javascript hasta que el código termina de ejecutarse.

sobre this

this es una variable que depende completamente de cómo se inicializó y llamó la función. El artículo de MDN puede volver a resultar útil aquí.

Veamos nuevamente su función de ejemplo, con algunos comentarios y ejemplos en línea:

 function foo() { console.log(this); } // Sure, calling `foo()` right now will print `window` if you're in a browser foo(); //prints `window` in a browser // But any use of `new` keyword will change `this` (including classes) const obj = new Object(); obj.foo = foo; obj.foo(); //prints `{ foo: [Function: foo] }` // Similarly, assigning `foo` to a plain object will also change `this` const obj = {}; obj.foo = foo; obj.foo(); //prints `{ foo: [Function: foo] }` // Lastly, any of the `Function.prototype` methods `bind`, `apply`, `call` // intentionally change `this` // // `bind()` returns a new function: const boundFunction = foo.bind({"this is a property": "and a value, see!?"}); boundFunction(); //prints `{ 'this is a property': 'and a value, see!?' }` // //`apply()` and `call()` both execute the function // (the difference between the two is in how arguments are passed, // see the MDN articles on // [apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#syntax) and on // [call](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call#syntax) for more details) foo.apply({bar:1}); //prints `{ bar: 1 }` foo.call({baz: 2}); //prints `{ baz: 2 }`

This en Javascript se comporta de manera diferente en el navegador y Node env. this en contexto global apunta a la ventana en el navegador y globalthis en Node. En este caso, 'Esto' apunta al objeto que llama, es decir, obj. cuando se llama a un fn js mira esto en su entorno léxico. También puede vincular este contexto con apply, bind, call.

 const obj = {name:'Irfan',fn:function(){console.log(this.name)}} // will print Irfan

Aquí esto apunta a obj, es decir, this=obj(this.name=obj.name), pero en la flecha fn esto no está vinculado de forma predeterminada.