1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JavaScript执行上下文和作用域链

JavaScript执行上下文和作用域链

时间:2023-06-03 09:05:23

相关推荐

JavaScript执行上下文和作用域链

执行上下文作用域链

执行上下文(Execution Context):函数执行前进行的准备工作(也称执行上下文环境)

运行 JavaScript 代码的时候,当代码执行进入一个环境时,就会为该环境创建一个执行上下文,它会在运行代码前做一些准备工作,如确定作用域,创建局部变量对象等。

一:JavaScript执行环境

<script>//全部变量function foo(){//局部上下文console.log("12");}foo();//12//eval函数:将字符串以js方式来运行//eval函数上下文eval("let a=1;console.log(a)"); //1</script>

1.全局上下文
全局执行上下文
2.局部环境
局部执行上下文
3.eval函数环境
eval函数:将字符串以js方式来运行eval函数执行上下文如果参数是表达式,则 eval() 计算表达式。如果参数是一个或多个 JavaScript 语句,则 eval() 执行这些语句。

二:函数调用栈

在 JavaScript 中,通过栈的存取方式来管理执行上下文,我们可称其为执行栈,或函数调用栈(Call Stack)。

三:执行上下文生命周期

执行上下文创建时会产生作用域链对象作用域链对象包含变量对象(vo)和scope对象其中Scope对象不是在执行上下文创建时产生,而是在函数声明时就产生了Scope保存的是声明该函数所在的执行上下文的作用域链对象
1.创建阶段
创建变量初始化作用域链确定this指向确定作用域
2.执行阶段
变量对象赋值调用函数顺序执行其他代码

四:执行上下文和作用域的区别

前面有提到,执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会执行上下文环境。当函数调用完成时,这个上下文环境以及其中的数据都会被消除(除了闭包),处于活动状态的执行上下文环境只有一个。

而作用域在函数定义时就已经确定了,不是在函数调用时确定(区别于执行上下文环境,当然 this 也是上下文环境里的成分)

作用域只是一个"地盘",其中没有变量。变量是通过作用域对应的执行上下文环境中的变量对象来实现的。所以作用域是静态观念的,而执行上下文环境是动态上的,两者并不一样。

五:变量对象

在函数的建立阶段,首先会建立 Arguments 对象。然后确定形式参数,检查当前上下文中的函数声明,每找到一个函数声明,就在 variableObject 下面用函数名建立一个属性,属性值就指向该函数在内存中的地址的一个引用。如果上述函数名已经存在于variableObject(简称VO)下面,那么对应的属性值会被新的引用给覆盖。最后,是确定当前上下文中的局部变量,如果遇到和函数名同名的变量,则会忽略该变量。

六:作用域链

所谓作用域链,就是内部上下文所有变量对象(包括父变量对象)的列表。此链主要是用于变量查询。

scope:作用域链对象(声明对象的时候就开始产生scope了)

var a=50;function foo1(){console.log(`foo1:${a}`); //undefinedvar a = 100;}foo1();console.log(`全局:${a}`); //50//当函数里面的var a = 100;改为a=100时,会输出(foo1:50,全局:100

var food="鸡翅";function eat(){console.log("吃",food);//吃鸡翅}(function(){var food = "包子";eat(); }())

谁声明的函数就执行谁的作用域链

var food = "鸡翅";(function () {var food = "包子";function eat() {console.log("吃", food);//吃包子}eat();}())

var a = 1;function b() {console.log(a);a = 10; //a与函数名重名,把栈里面的存放一个地址的a改为10(a是一个函数)console.log(a);return;function a() {}}b();alert(a); //1

var f = true;if (f === true) {var a = 10;}function fun() {var b = 20; //var在函数里面无法提升变量到函数外c = 30;//非严格模式下,如果作用域中没有所查询变量,全局作用域就会自动创建一个具有该名称的变量}fun();console.log(a);console.log(b);console.log(c);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。