什么是执行环境

news/2024/7/16 5:09:15

什么是执行环境

当代码在JavaScript中运行的时候,代码在环境中被执行是非常重要的,它会被评估为以下之一类型来运行:
全局代码:默认环境,你的代码第一时间在这儿运行。
函数代码:当执行流进入一个函数体的时候。
Eval代码:在eval()函数中的文本。

你可以在网上查找关于作用域的大量资料,这篇文章的目的就是让事情变得更容易理解。让我们把执行环境作为环境/作用域,当前代码被评估在这个环境/作用域中。现在,让我们来看一个例子,代码被评估某个类型,这个例子中类型包括全局和函数环境:
在这里插入图片描述
这里并没有什么特别的,我们有一个全局环境,全局环境由紫色边框表示,还有三个不同的函数环境分别由绿色边框,蓝色边框和橙色边框表示。这里只能由一个全局环境,在你的程序中,全局环境可以被其他环境访问。

你可以由很多的函数环境,每个函数都会创建一个新的函数环境,在新的函数环境中,会创建一个私有作用域,在这个函数中创建的任何声明都不能被当前函数作用域之外的地方访问。在上面例子中,一个函数可以访问当前环境外部定义的变量,但是在外部却无法访问函数内部声明的变量。为什么这样?这段代码究竟是如何评估的?

执行环境栈

JavaScript解释器在浏览器中是单线程的,这意味着浏览器在同一时间内只执行一个事件,对于其他的事件我们把它们排队在一个称为 执行栈的地方。下表是一个单线程栈的抽象视图。

在这里插入图片描述

我们已经知道,当浏览器第一次加载你的script,它默认的进了全局执行环境。如果在你的全局代码中你调用了一个函数,那么顺序流就会进入到你调用的函数当中,创建一个新的执行环境并且把这个环境添加到执行栈的顶部。

如果你在当前的函数中调用了其他函数,同样的事会再次发生。执行流进入内部函数,并且创建一个新的执行环境,把它添加到已经存在的执行栈的顶部。浏览器始终执行当前在栈顶部的执行环境。一旦函数完成了当前的执行环境,它就会被弹出栈的顶部, 把控制权返回给当前执行环境的下个执行环境。下面例子展示了一个递归函数和该程序的执行栈:

(function foo(i) {
if (i === 3) {
return;
}
else {
foo(++i);
}
}(0));

在这里插入图片描述
这段代码简单地调用了自己三次,由1递增i的值。每次函数foo被调用,一个新的执行环境就会被调用。一旦一个环境完成了执行,它就会被弹出执行栈并且把控制权返回给当前执行环境的下个执行环境直到再次到达全局执行环境。


http://www.niftyadmin.cn/n/4022162.html

相关文章

css外层DIV半透明内层div不透明-弹出层效果的实现

css外层DIV半透明内层div不透明-弹出层效果的实现 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title><style type"text/css">body…

android root检测原理wechat root检测

root 检测原理已经root设备&#xff0c;会增加一些特殊包或文件&#xff0c;所以可以通过检测这些包(如Superuser.apk、检测su命令)、activity、文件是否存在来判断。app检测是否可以执行在root下才能运行的命令。检测busybox工具是否存在,关于busybox的知识google上一大堆&…

ANGULAR JS 常用指令NG-IF、NG-CLASS、NG-OPTION、NG-VALUE、NG-CLICK是如何使用的?

大家好&#xff0c;我是IT修真院武汉分院第12期学员&#xff0c;一枚正直善良的web程序员。 今天给大家分享一下&#xff0c;修真院官网JS8任务中可能会使用到的知识点&#xff1a; ANGULAR JS 常用指令NG-IF、NG-CLASS、NG-OPTION、NG-VALUE、NG-CLICK是如何使用的&#xff1f…

i5服务器各种型号,酷睿i5型号有哪些 酷睿i5型号有哪些不同【详细介绍】

酷睿i5指的不是一款型号的处理器&#xff0c;它旗下有多个细分产品&#xff0c;不同的处理器在定价和销售定位以及用户的实际使用体验几个方面的内容都会有所区别。因此我们在实际选择购置的时候尤其需要注意它们之间的差异&#xff0c;并且还需要参考自己的实际需求报价进行筛…

总结的小知识点(一)

Vue-resource和后端做数据交互&#xff08;ajax通信&#xff09;&#xff0c;vue-router做前端路由&#xff0c;webpack工具编译我们的代码变成可以让浏览器识别的代码&#xff0c;实现单页应用&#xff0c;收藏商家利用html5的localStorage存储在浏览器端Npm install –g vue-…

Hashtable 为什么不叫 HashTable?

2019独角兽企业重金招聘Python工程师标准>>> 前几天在写《HashMap 和 Hashtable 的 6 个区别》这篇文章的时候&#xff0c;差点把 Hashtable 写成了 HashTable&#xff0c;后来看源码证实了是&#xff1a;Hashtable&#xff0c;小写的 "t"able&#xff0c…

Vue评论组件案例

最近学习了Vue前端框架&#xff0c;在这里记录一下组件的用法&#xff0c;我自己试着写了一个评论的组件&#xff0c;大神看到勿喷&#xff0c;欢迎提出宝贵意见。 首先看一下效果图 用到的文件有&#xff1a; <link rel"stylesheet" href"../js/bootstrap/d…

为NEO-GUI 添加插件系统

作为一个NEO区块链技术爱好者&#xff0c;经常要摆弄NEOGUI&#xff0c;而NEOGUI在众多开发者手中有了众多的分支实现&#xff0c;我也有自己的分支改版。这是一件很麻烦的事情。 虽然NEO-GUI定位为一个演示客户端与开发工具&#xff0c;不过使用他的开发者还是很多的&#xff…