通过javascript 执行环境理解她
<blockquote><p>古往今来最难的学的武功(javascript)算其一。</p>
</blockquote>
<blockquote>
<p>欲练此功必先自宫，愿少侠习的此功，笑傲江湖。</p>
</blockquote>
<h2 id="你将了解">你将了解</h2>
<ul>
<li>执行栈（Execution stack）</li>
<li>执行上下文（Execution Context）</li>
<li>作用域链（scope chains）</li>
<li>变量提升（hoisting）</li>
<li>闭包（closures）</li>
<li>this 绑定</li>
</ul>
<h2 id="执行栈">执行栈</h2>
<p>又叫调用栈，具有 LIFO（last in first out 后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。</p>
<p>当 JavaScript 引擎首次读取你的脚本时，它会创建一个全局执行上下文并将其推入当前的执行栈。每当发生一个函数调用，引擎都会为该函数创建一个新的执行上下文并将其推到当前执行栈的顶端。<br>
引擎会运行执行上下文在执行栈顶端的函数，当此函数运行完成后，其对应的执行上下文将会从执行栈中弹出，上下文控制权将移到当前执行栈的下一个执行上下文。</p>
<p>我们通过下面的示例来说明一下</p>
<pre><code class="language-js">function one() {
console.log('one')
two()
}
function two() {
console.log('two')
}
one()
</code></pre>
<p>当程序（代码）开始执行时 javscript 引擎创建 <code>GobalExecutionContext</code> （全局执行上下文）推入当前的执行栈，此时 <code>GobalExecutionContext</code> 处于栈顶会立刻执行全局执行上下文 然后遇到 <code>one()</code> 引擎都会为该函数创建一个新的执行上下文 <code>oneFunctionExecutionContext</code> 并将其推到当前执行栈的顶端并执行，然后遇到<code>two()</code> <code>twoFunctionExecutionContext</code> 入栈并执行至出栈，回到 <code>oneFunctionExecutionContext</code> 继续执行至出栈 ,最后剩余一个 <code>GobalExecutionContext</code> 它会在程序关闭的时候出栈。</p>
<p>然后调用栈如下图：<br>
<img src="https://user-gold-cdn.xitu.io/2019/11/15/16e6d55ba05656c8?w=1077&h=280&f=png&s=15925" alt="image" loading="lazy"></p>
<p>如果是这样的代码</p>
<pre><code class="language-js">function foo() {
foo()
}
foo()
</code></pre>
<p>如下<br>
<img src="https://user-gold-cdn.xitu.io/2019/11/15/16e6d55bc9629ff8?w=1078&h=321&f=png&s=22639" alt="image" loading="lazy"><br>
当一个递归没有结束点的时候就会出现栈溢出</p>
<h2 id="什么是执行上下文">什么是执行上下文</h2>
<p>了解 JavaScript 的执行上下文，有助于你理解更高级的内容比如变量提升、作用域链和闭包。既然如此，那到底什么是“执行上下文”呢？</p>
<p>执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念。</p>
<p>Javascript 中代码的执行上下文分为以下三种：</p>
<ol>
<li>全局执行上下文（Global Execution Context）- 这个是默认的代码运行环境，一旦代码被载入，引擎最先进入的就是这个环境。</li>
<li>函数执行上下文（Function Execution Context） - 当执行一个函数时，运行函数体中的代码。</li>
<li>Eval - 在 Eval 函数内运行的代码。</li>
</ol>
<p>javascript 是一个单线程语言，这意味着在浏览器中同时只能做一件事情。当 javascript 解释器初始执行代码，它首先默认进入全局上下文。每次调用一个函数将会创建一个新的执行上下文。</p>
<blockquote>
<p>javascript执行栈中不同执行上下文之间的词法环境有一种关联关系，从栈顶到栈底（从局部直到全局）,这种关系被叫做<code>作用域链</code>。</p>
</blockquote>
<p>简单的说，每次你试图访问函数执行上下文中的变量时，进程总是从自己上下文环境中开始查找。如果在自己的上下文中没发现要查找的变量，继续搜索下一层上下文。它将检查<code>执行栈</code>中每一个执行上下文环境，寻找和变量名称匹配的值，直到找到为止，如果到全局都没有则抛出错误。</p>
<h3 id="执行上下文的创建过程">执行上下文的创建过程</h3>
<p>我们现在已经知道，每当调用一个函数时，一个新的执行上下文就会被创建出来。然而，在 javascript 引擎内部，这个上下文的创建过程具体分为两个阶段:</p>
<p>创建阶段 > 执行阶段</p>
<h3 id="创建阶段">创建阶段</h3>
<p>执行上下文在创建阶段创建。在创建阶段发生以下事情：</p>
<ol>
<li>LexicalEnvironment 组件已创建。</li>
<li>VariableEnvironment 组件已创建。</li>
</ol>
<p>因此，执行上下文可以在概念上表示如下：</p>
<pre><code class="language-js">ExecutionContext = {
LexicalEnvironment = <词法环境>，
VariableEnvironment = <变量环境>，
}
</code></pre>
<h3 id="词法环境lexical-environment">词法环境（Lexical Environment）</h3>
<p>官方 ES6 文档将词法环境定义为：</p>
<blockquote>
<p>词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符与特定变量和函数的关联关系。词法环境由环境记录（environment record）和可能为空引用（null）的外部词法环境组成。</p>
</blockquote>
<p>简而言之，词法环境是一个包含标识符变量映射的结构。（这里的标识符表示变量/函数的名称，变量是对实际对象【包括函数类型对象】或原始值的引用）</p>
<h4 id="词法环境有两种类型">词法环境有两种类型</h4>
<ul>
<li>全局环境（在全局执行上下文中）是一个没有外部环境的词法环境。全局环境的外部环境引用为 null。它拥有一个全局对象（window 对象）及其关联的方法和属性（例如数组方法）以及任何用户自定义的全局变量，this 的值指向这个全局对象。</li>
<li>函数环境，用户在函数中定义的变量被存储在环境记录中。对外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境。</li>
</ul>
<h4 id="每个词汇环境都有三个组成部分">每个词汇环境都有三个组成部分：</h4>
<p>1）环境记录（environment record）</p>
<p>2）对外部环境的引用(outer)</p>
<p>3） 绑定 this</p>
<h4 id="环境记录-同样有两种类型如下所示">环境记录 同样有两种类型（如下所示）：</h4>
<ul>
<li>声明性环境记录 存储变量、函数和参数。一个函数环境包含声明性环境记录。</li>
<li>对象环境记录 用于定义在全局执行上下文中出现的变量和函数的关联。全局环境包含对象环境记录</li>
</ul>
<p>抽象地说，词法环境在伪代码中看起来像这样：</p>
<blockquote>
<p>词法环境和环境记录值是纯粹的规范机制，ECMAScript 程序不能直接访问或操纵这些值。</p>
</blockquote>
<pre><code class="language-js">GlobalExectionContext = {
// 词法环境
LexicalEnvironment:{
// 功能环境记录
EnvironmentRecord:{
Type:"Object",
// Identifier bindings go here
}
outer:<null>,
this:<global object>
}
}
FunctionExectionContext = {
LexicalEnvironment:{
EnvironmentRecord:{
Type:"Declarative",
// Identifier bindings go here
}
outer:<Global or outer function environment reference>,
this:<取决于函数的调用方式>
}
}
</code></pre>
<h4 id="变量环境">变量环境:</h4>
<p>它也是一个词法环境，其 EnvironmentRecord 包含了由 VariableStatements 在此执行上下文创建的绑定。<br>
如上所述，变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性。<br>
在 ES6 中，LexicalEnvironment 组件和 VariableEnvironment 组件的区别在于前者用于存储函数声明和变量（ let 和 const ）绑定，而后者仅用于存储变量（ var ）绑定。<br>
让我们结合一些代码示例来理解上述概念：</p>
<pre><code class="language-js">let a = 20
const b = 30
var c
function multiply(e, f) {
var g = 20
return e * f * g
}
c = multiply(20, 30)
</code></pre>
<p>执行上下文如下所示：</p>
<pre><code class="language-js">GlobalExectionContext = {
LexicalEnvironment:{
EnvironmentRecord:{
Type:"Object",
// Identifier bindings go here
a:<uninitialized>,
b:<uninitialized>,
multiply:<func>
},
outer:<null>,
ThisBinding:<Global Object>
},
VariableEnvironment:{
EnvironmentRecord:{
Type:"Object",
// Identifier bindings go here
c:undefined,
}
outer:<null>,
ThisBinding:<Global Object>
}
}
</code></pre>
<p>在执行阶段，完成变量赋值。因此，在执行阶段，全局执行上下文将看起来像这样。</p>
<pre><code class="language-js">// 执行
GlobalExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Object",
// Identifier bindings go here
a: 20,
b: 30,
multiply: < func >
}
outer: <null>,
ThisBinding: <Global Object>
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Object",
// Identifier bindings go here
c: undefined,
}
outer: <null>,
ThisBinding: <Global Object>
}
}
</code></pre>
<p>当 multiply(20, 30)遇到函数调用时，会创建一个新的函数执行上下文来执行函数代码。因此，在创建阶段，函数执行上下文将如下所示：</p>
<pre><code class="language-js">// multiply 创建
FunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
Arguments: {0: 20, 1: 30, length: 2},
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
g: undefined
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>
}
}
</code></pre>
<p>在此之后，执行上下文将执行执行阶段，这意味着完成了对函数内部变量的赋值。因此，在执行阶段，函数执行上下文将如下所示：</p>
<pre><code class="language-js">// multiply 执行
FunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
Arguments: {0: 20, 1: 30, length: 2},
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object>,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
g: 20
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>
}
}
</code></pre>
<p>函数完成后，返回的值赋值给<code>c</code>。因此，全局词法环境得到了更新。之后，全局代码完成，程序结束。</p>
<p>注： 在执行阶段，如果 Javascript 引擎在源代码中声明的实际位置找不到 <code>let</code> 变量的值，那么将为其分配 <code>undefined</code> 值。</p>
<h3 id="变量提升">变量提升</h3>
<p>在网上一直看到这样的总结： 在函数中声明的变量以及函数，其作用域提升到函数顶部，换句话说，就是一进入函数体，就可以访问到其中声明的变量以及函数。这是对的，但是知道其中的缘由吗？相信你通过上述的解释应该也有所明白了。不过在这边再分析一下。</p>
<p>你可能已经注意到了在创建阶段 <code>let</code> 和 <code>const</code> 定义的变量没有任何与之关联的值，但 <code>var</code> 定义的变量设置为 <code>undefined</code>。<br>
这是因为在创建阶段，代码会被扫描并解析变量和函数声明，其中函数声明存储在环境中，而变量会被设置为 <code>undefined</code>（在 <code>var</code> 声明变量的情况下）或保持未初始化（在 <code>let</code> 和<code>const</code> 声明变量的情况下）。<br>
这就是为什么你可以在声明之前访问<code>var</code> 定义的变量（尽管是 <code>undefined</code> ），但如果在声明之前访问<code>let</code> 和<code>const</code> 定义的变量就会提示引用错误的原因。<br>
这就是我们所谓的<code>变量提升</code>。</p>
<blockquote>
<p>思考题：</p>
</blockquote>
<pre><code class="language-js">console.log('step1:',a)
var a = 'artiely'
console.log('step2:',a)
function bar (a){
console.log('step3:',a)
a = 'TJ'
console.log('step4:',a)
function a(){
}
}
bar(a)
console.log('step5:',a)
</code></pre>
<h3 id="对外部环境的引用">对外部环境的引用</h3>
<p>上面代码如果我们改用调用方式如下：</p>
<pre><code class="language-js">let a = 20
const b = 30
var c
function multiply() {
var g = 20
return a * b * g
}
c = multiply()
</code></pre>
<p>其实你会发现结果是一样的<br>
但是 <code>multiply</code> 的执行上下文却发生一些变化</p>
<pre><code class="language-js">// 创建
FunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
Arguments: { length: 0},
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// Identifier bindings go here
g: undefined
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>
}
}
</code></pre>
<pre><code class="language-js">// 执行
FunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
Arguments: { length: 0},
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// Identifier bindings go here
g: 20
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>
}
}
</code></pre>
<p><code>multiply()</code> 执行的时候会直接在 <code>outer: <GlobalLexicalEnvironment>,</code>中查找<code>a,b</code></p>
<p>对外部环境的引用意味着它可以访问其外部词法环境。这意味着如果在当前词法环境中找不到它们，JavaScript 引擎可以在外部环境中查找变量。这就是之前说的 <code>作用域链</code></p>
<h3 id="闭包">闭包</h3>
<blockquote>
<p>MDN 解释 闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量</p>
</blockquote>
<p>这是我认为对闭包最合理的解释了，就看你怎么理解闭包的机制了。<br>
其实闭包与作用域链有着密切的关系。</p>
<p>首先我们来看看什么样的代码会产生闭包。</p>
<pre><code class="language-js">function foo() {
var name = 'artiely'
function bar() {
console.log(`hello `)
}
bar()
}
foo()
</code></pre>
<p>以上代码是有闭包吗？没有~</p>
<pre><code class="language-js">function foo() {
var name = 'artiely'
function bar() {
console.log(`hello ${name}`)
}
bar()
}
foo()
</code></pre>
<p>我们只做了微小的调整，现在就有闭包了,我们只是在<code>bar</code>中加入了<code>name</code>得引用<br>
上面的代码还可以写成这样</p>
<pre><code class="language-js">// 或者
function foo() {
var name = 'artiely'
return function bar() {
console.log(`hello ${name}`)
}
}
foo()()
</code></pre>
<p>对于闭包的形成我进行了如下的几点归纳</p>
<ol>
<li>A 函数内必须有 B 函数的声明；</li>
<li>B 函数必须引用 A 函数的变量；</li>
<li>B 函数被调用（当然前提是 A 函数被调用）</li>
</ol>
<p>以上 3 点缺一不可</p>
<p>我们来分析一下上面代码的执行上下文</p>
<pre><code class="language-js">// 创建
fooFunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
Arguments: { length: 0},
bar: < func >,
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
name: undefined
},
outer: <GlobalLexicalEnvironment>,
ThisBinding: <Global Object or undefined>
}
}
// 执行 略
</code></pre>
<pre><code class="language-js">// 创建
barFunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
Arguments: { length: 0},
},
outer: <fooLexicalEnvironment>,
ThisBinding: <Global Object or undefined>,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
},
outer: <fooLexicalEnvironment>,
ThisBinding: <Global Object or undefined>
}
}
// 执行 略
</code></pre>
<p>这里因为<code>bar</code>的创建存在着对<code>fooLexicalEnvironment</code>里变量的引用，虽然<code>foo</code>可能执行已结束但变量不会被回收。这种机制被叫做<code>闭包</code></p>
<blockquote>
<p>闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量</p>
</blockquote>
<p>我们结合上面例子重新分解一下这句话</p>
<p>闭包是由函数<code>bar</code>以及创建该函数<code>foo</code>的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量<code>name</code></p>
<p>但是从chrome的理解，闭包并没有包含所能访问的所有局部变量，仅仅包含所被引用的变量。</p>
<h2 id="this-绑定">this 绑定</h2>
<p>在全局执行上下文中，值是 this 指全局对象。（在浏览器中，this 指的是 Window 对象）。</p>
<p>在函数执行上下文中，值 this 取决于函数的调用方式。如果它由对象引用调用，则将值 this 设置为该对象，否则，将值 this 设置为全局对象或 undefined（在严格模式下）。例如：</p>
<pre><code class="language-js">let person = {
name: 'peter',
birthYear: 1994,
calcAge: function() {
console.log(2018 - this.birthYear)
}
}
person.calcAge()
// 'this' 指向 'person', 因为 'calcAge' 是被 'person' 对象引用调用的。
let calculateAge = person.calcAge
calculateAge()
// 'this' 指向全局 window 对象,因为没有给出任何对象引用
</code></pre>
<p>注意所有的<code>()()</code>自调用的函数 this 都是指向<code>Global Object</code>的既浏览器中的<code>window</code></p>
<h2 id="最后">最后</h2>
<p>如果本文对你有帮助或觉得不错请帮忙点赞，如有疑问请留言。</p>
<p>其他参考：<br>
https://hackernoon.com/execution-context-in-javascript-319dd72e8e2c</p>
<p>https://tylermcginnis.com/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript/</p>
<p>https://hackernoon.com/javascript-execution-context-and-lexical-environment-explained-528351703922</p><br><br>
来源：https://www.cnblogs.com/coolslider/p/11897570.html
頁:
[1]