你可曾见过如此简单粗暴的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

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

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

相关文章
|
24天前
|
机器学习/深度学习 人工智能 JavaScript
js和JavaScript
js和JavaScript
21 4
|
1月前
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
45 1
|
1月前
|
JavaScript 前端开发 Java
liteflow规则引擎 执行Javascript脚本
liteflow规则引擎 执行Javascript脚本
42 1
|
1月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
27 2
|
2天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1
|
13天前
|
Web App开发 缓存 JavaScript
|
23天前
|
JavaScript 前端开发
JavaScript生成的随机数随机字符串JS生成的随机数随机字符串
JavaScript生成的随机数随机字符串JS生成的随机数随机字符串
14 1
|
1月前
|
JavaScript 前端开发
js开发:请解释什么是模块化(modularization),并说明如何在JavaScript中实现模块化。
模块化将复杂系统拆分为松散耦合的模块,提高代码可读性、可维护性、可复用性和可扩展性。JavaScript模块化历经CommonJS(Node.js中常见,使用`require()`和`module.exports`)、AMD(RequireJS,异步加载,`define()`和`require()`)和ES6 Modules(官方标准,`import`和`export`)三个阶段。打包工具如Webpack、Rollup处理兼容性问题,使模块化代码能在各种环境中运行。
|
1月前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
JavaScript中的`this`关键字根据执行上下文指向不同对象:全局作用域中指向全局对象(如`window`),普通函数中默认指向全局对象,但作为对象方法时指向该对象。在构造函数中,`this`指向新实例。箭头函数不绑定`this`,而是继承上下文的`this`值。可通过`call`、`apply`、`bind`方法显式改变`this`指向。
10 2
|
1月前
|
JSON JavaScript 前端开发
JS逆向快速定位关键点之9大通用hook脚本
JS逆向快速定位关键点之9大通用hook脚本