你可曾见过如此简单粗暴的JavaScript解说 -- 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 毫秒的时候

Paste_Image.png

编译器看到了这句话,

var a = 0;

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

于是

Paste_Image.png

0.00000002 毫秒的时候

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

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

于是:

Paste_Image.png

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

var a = 100;

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

Paste_Image.png

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

0.00000003 毫秒的时候

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

Paste_Image.png
var a = 0;

a(全局): js引擎大哥,给我吃饭吧 。。。
js引擎: 吵啥子吵,先给你个undefined,吃这个吧 。
于是:

Paste_Image.png

a(全局):只要心中有梦想,undefined也是嚼劲十足!
js引擎: 等号右边有一个 0 ,我把它给你吧。
a(全局):谢谢引擎大哥。

Paste_Image.png

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

Paste_Image.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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容