JavaScript中的执行上下文和执行栈

news2025/2/24 15:59:59

执行上下文概念以及理解

执行上下文是评估和执行JavaScript代码环境的抽象概念，但我们在JavaScript中所做的声明变量，声明函数，执行函数。他们都是在执行上下文中运行，也有了所谓的作用域。

执行上下文的类型

执行上下文分为三种类型，例如全局申明挂到window下的变量就是全局执行上下文；函数被调用时创建的上下文的上下文类型为函数执行上下文，以及不常用的Eval也有属于自己的执行上下文

全局执行上下文 默认的上下文，其实就是全局对象window。任何不在函数内部的代码都在全局上下文中。
会执行俩个事件：创建一个全局的window对象，设置this指向这个全局对象，一个程序中只有这一个全局执行上下文

// 这里声明的这个window下的变量上下文就是window
var windowVaribale 

// 挂在window下的函数，
function windowFunction (){
	console.log(this)
}
// 直接执行，执行上下文就是全局执行上下文
windowFunction() //这里的this 指向window

2.函数执行上下文一个函数被调用时，都会创建一个新的上下文。每个被执行的函数都有自己的执行上下文，被调用时创建。谁调用this指向谁

  let functionIntegratio = {
            sayHello: function () {
                alert("hello")
            },
            yell: function () {
                alert("Hamburger")
                console.log(this)
            }
        }
        let consumer = {}
        consumer.yell = functionIntegratio.yell //这里yell 的执行上下文时consumer对象


        consumer.yell() // 这里的this 指向consumer --- 谁调用this指向谁

        let windowsFunction = functionIntegratio.yell
        windowsFunction()  // 这里this 是window

3.Eval 不讨论，因为不会，面试也不问

执行栈

所谓非计算机的人,like me . 难以理解害怕接触的痛
其实就是拥有LIFO（后进先出）数据结构的栈–last in first out （真他妈装呗），被用来存储代码创建的所有执行上下文。
JavaScrpt引擎第一次遇到你的脚本时，会创建一个全局执行上下文并且压入当前执行栈。没当引擎遇到一个新的函数调用，就会给新的函数创建一个新的执行上下文，然后把新的上下文压进栈顶，again and again
Util some funciton is finished . then let it out , 然后控制流程达到打钱栈中的上一个上次问

鬼鬼悟了！
所谓后进先出，先进先出不过是一种数据结构，而执行栈不过就是后进先出的数据结构，在这种数据结构下，才有了我们现在执行函数时候依次执行，有自己的作用域，this 指向

	function start () {
	console.log('Hello, mother funcker')
	(function functionInStart(){
		console.log("bla bla ")
	})()
 }
 // 这里首先创建start函数的执行上下文，就是先把start的指向上下文压（push）到栈顶 ，然后指向，执行到start函数里面的子函数时，创建了子函数的新的执行上下文，这个时候把子函数压到栈顶，先执行栈顶的函数，然后等子函数执行完，后入先出Last in first out，把子函数扔了，然后就是栈中应该执行的start函数，easy

晚上看到某个大哥给先进先出，后进先出俩种数据结构附的图，精彩，好理解。

俩种数据结构罢了，队列先进先出（FIFO）。执行栈后进先出(LIFO)，测
在这里插入图片描述

词法作用域

JavaScript 采用的是词法作用域，函数的作用域在被定义的时候就决定了

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

// the result is 1 . cause the lexical scope is already confirm when the function is defined 


// so ... if we remove funciton foo to bar inside, the console result will be 2
var value = 1;

function bar() {
	function foo() {
	    console.log(value);
	}
    var value = 2;
    foo();
}

bar();

An example form 《JavaScript:The Definitive Guide》

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();