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

执行上下文概念以及理解

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

执行上下文的类型

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

  1. 全局执行上下文 默认的上下文,其实就是全局对象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()();

results all is ‘local scope’

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值