前言

执行上下文：是JavaScript代码在执行时所处的环境，包括变量的作用域、对象的this引用以及作用域链等信息。在代码执行过程中，JavaScript引擎会创建并管理多个执行上下文，每个执行上下文都会包含特定的信息，以便代码能够正确执行并访问到所需的变量和函数。执行上下文可以分为三种类型：全局执行上下文、函数执行上下文和eval执行上下文。在JavaScript代码执行时，执行上下文会被创建、压入执行上下文栈中，并在执行完成后被弹出。理解执行上下文的概念对于理解JavaScript代码的执行过程以及变量作用域至关重要。

正文

变量提升

js引擎在执行js的过程中把变量声明部分和函数声明部分提升到代码头部，默认赋值为undefined；
声明提升是发生在编译阶段。

代码展示

showName();
console.log(myName);
var myName = 'tt';

function showName() {
    console.log('函数showName被执行');
}

相当于下面的代码

var myName = undefined;//在运行内存(内存分为运行内存和本地内存)   
function showName() {
    console.log('函数showName被执行');
}
showName();
console.log(myName);
myName = 'tt';

执行上下文

调用栈

栈结构：特殊的数组，先进后出
调用栈：js引擎用来追踪函数调用关系的
栈溢出：调用栈的内存超过限制

代码

var a = 2;

function add(b ,c) {
  return c + b;
}

function addAll(b ,c) {
  var d = 10;
  var res = add(b ,c);
  return a + res + d;
}

addAll(3 ,6)

该代码的执行上下文

栈

代码

function foo() {
    var a = 1;
    let b = 2;
    {
        let b = 3;
        var c = 4;
        let d = 5;
        console.log(a);//1
        console.log(b);//3
    }
    console.log(b);//2
    console.log(c);//4
    console.log(d);//error
}
foo();

执行上下文

作用域链

并不是在调用栈中从上往下查找，而是看当前执行上下文变量环境中的outer指向来定，而outer指向的规则是，我的词法作用域在哪里，就指向哪里
词法作用域:在函数定义时所在的作用域

代码

function bar() {
    console.log(myName);
}
function foo() {
    var myName = 'ltt';
    bar();
}

var myName = 'pip';
foo();

分析调用是由当前执行上下文变量环境中的outer指向来定，outer指向词法作用域，词法作用域是在函数定义时所在的作用域，该函数的定义的作用域为全局作用域，所以输出的为pip。

代码


function foo() {
    var myName = 'ltt';
    function bar() {
    console.log(myName);
}
bar();
}

var myName = 'pip';
foo();

分析该函数的定义的作用域为foo函数作用域，所以输出的为ltt。

结语

有没有理解小编分享的呢？有收获的话记得点个赞哟~

深入探讨执行上下文：从变量作用域到作用域链的全面解析

前言

正文

变量提升

执行上下文

调用栈

作用域链

结语