你可曾见过如此简单粗暴的JavaScript解说 -- js脚本运行机制

简介: 首先,上几道我编写的 js 题,作为分析的样本。请根据代码,选择正确的选项。

写作不易,转载请注明出处,谢谢。

首先,上几道我编写的 js 题,作为分析的样本。

请根据代码,选择正确的选项。

第一题

var a = 0;
function test(){
  alert(a);
}
test();

A. 0

B. null

C. undefined

第二题

var a = 0;
function test(){
  alert(a);
  a = 100;
}
test();

A. 0

B. null

C. undefined

第三题

var a = 0;
function test(){
  alert(a);
  var a = 100;
}
test();

A. 0

B. 100

C. undefined


正确答案:


A , A , C


前两题没啥好说的,之前关于闭包的博文中已经讲得很清楚了,函数 test 形成了自己的闭包,所以能够访问到全局作用域里面的变量 a 。


第三题可能有人会觉得有点奇怪,为啥是 undefined 的呢?虽然我在闭包内定义了 var a = 100 , 可是它分明是在 alert 语句的下面啊,所以不是应该先打印出全局作用域里的 a 吗?


不要着急,我们来讲一个故事吧,当你将这段代码放进浏览器跑起来的那一个瞬间,到底发生了哪些有趣的事情。


当你刷新浏览器之后。。。


###0.00000001 毫秒的时候

a895c9923f181e89412ba0ce3ada14ac.png

编译器看到了这句话,

var a = 0;


编译器 : ‘nice,发现一个活的 a 变量,我要把它丢到作用域中去囚禁它!

于是

f959b478dc009e4c8e04e66636857f88.png

###0.00000002 毫秒的时候

编译器 : nice,发现一个活的 test 变量,我擦,还是一个函数类型,作用域,又有新货了!

作用域 : ‘可以呀,小伙子!’

于是:

f1f6bfde38e4d9a7bc4760bedaeffd21.png

编译器顺便把 test 函数给“扒”了,又发现里面有这么一句话:

var a = 100;


编译器:小样,别以为你躲在 test 函数的私有作用域里面我就找不到你了,全局作用域中的a和你没关系,你也进去!

46a359621fed0e73b951d867e451eb29.png

编译器:嗯,没找到什么变量定义了,好,我去休息啦。

###0.00000003 毫秒的时候

js引擎:终于轮到我出场了。

447ed1ab3f244228a79aefc305a50524.png

var a = 0;

a(全局): js引擎大哥,给我吃饭吧 。。。

js引擎: 吵啥子吵,先给你个undefined,吃这个吧 。

于是:

d685928560dd91268752cff27d4b52d5.png

a(全局):只要心中有梦想,undefined也是嚼劲十足!

js引擎: 等号右边有一个 0 ,我把它给你吧。

a(全局):谢谢引擎大哥。

523b89d02d150d52992e3ee5ad0c044d.png

同样的,test 变量 也吃上了饭。

76f9dc68c692d66091e669518865c4aa.png


a(局部) : 大哥,我别这么偏袒全局作用域啊,同样是 a 变量,我也要吃饭啊!

js引擎:你在函数内部,我还没执行函数呢,怎么给你吃饭呀,先给你个undefined吧。

a(局部) :可是我旁边有一个100啊。

js引擎:我刚才不是说了吗,我还没执行你呢,别挑了,有个undefined啃啃也不错了。


###0.00000004 毫秒的时候

test();


js引擎:我要开始执行test函数了。

alert(a);


js引擎:作用域在吗,我知道alert是一个内置函数,当我在执行它的时候,发现有一个a变量作为参数传进去了,你见过它么?


作用域:有啊,就那个刚才还吵着要吃饭的家伙。


js引擎:哦,我想起来了,现在它估计还在啃undefined呢,行吧,你把它给我吧,alert方法点名要找他呢。


作用域:OK。


故事到这里就讲完了,现在你应该明白为什么第三题的答案是undefined了吧。


附加题:

var a = 0;
function test(){
  alert(a);
  if(false){
    var a = 100;
  }
}
test();

A. 0

B. 100

C. undefined

别犹豫,大声说出你的答案吧!

可以将答案写在评论中哦!

相关文章
|
4月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
254 24
|
6月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
164 32
|
7月前
|
JavaScript Shell C#
多种脚本批量下载 Docker 镜像:Shell、PowerShell、Node.js 和 C#
本项目提供多种脚本(Shell、PowerShell、Node.js 和 C#)用于批量下载 Docker 镜像。配置文件 `docker-images.txt` 列出需要下载的镜像及其标签。各脚本首先检查 Docker 是否安装,接着读取配置文件并逐行处理,跳过空行和注释行,提取镜像名称和标签,调用 `docker pull` 命令下载镜像,并输出下载结果。使用时需创建配置文件并运行相应脚本。C# 版本需安装 .NET 8 runtime。
427 3
|
6月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
162 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
9月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
10月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
165 5
在浏览器执行js脚本的两种方式
|
10月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?