文档章节

JavaScript作用域举例分析

苏苏不是玛丽苏
 苏苏不是玛丽苏
发布于 2017/07/31 19:16
字数 762
阅读 2
收藏 0

首先,我们看一下浏览器对js的执行顺序:

1,遇到script标签进入作用域

2,遇到函数调用进入作用域

 

进入作用域后:

1,js预解析:

  • 1,创建一个独立的空间
  • 2,找var、方法参数和function方法。遇到var和方法参数时,将var和方法参数声明的变量保存为underfined;遇到function方法时,完整保存function方法。
  • (当变量名和方法名一致的时候,保留方法,去掉变量;当方法名一致的时候,后执行的方法会覆盖掉前一个方法)

2,顺序执行

开始从上到下顺序执行,遇到表达式(+、-、*、/、++、--....)就去修改预解析里面的变量值。

 

      上面没有理解也没关系,我们会通过例子,来告诉你浏览器每一步的执行情况(~ ̄▽ ̄)~ 

 

例子:

<script type="text/javascript"> 
var a=100;
     function cc() {
        alert(a);
        var a=200;
        alert(a);
     }
     cc();
     alert(a);
     var a;
     alert(a);
     var a=300;
     alert(a);
</script>

1,浏览器遇到script进入作用域,开辟独立空间A

2,开始预解析,找到var a=100,将a录入空间A,有a=underfined。找到function,空间A保存function完整内容。找到var a,a指向空间A的a=underfined。找到var a=300,a指向空间A的a=underfined。此时空间A有:a=underfined、function cc(){.....},预解析完成

预解析:创建一个独立的空间、找var、方法参数和function方法。遇到var和方法参数时,将var和方法参数声明的变量保存为underfined;遇到function方法时,完整保存function方法。

 

3,开始顺序执行,遇到表达式(+、-、*、/、++、--....)就去修改预解析里面的变量值。第一行就遇到了表达式“=”(var a=100),所以空间A中a的值修改为100。

     继续执行,遇到了函数调用cc(),再次进入作用域,开辟独立空间B

  • 1,在方法cc中开始预解析,找到了var a=200,将a录入空间B,有a=underfined,预解析完成
  • 2,开始顺序执行,遇到第一个alert(a)(就近原则,在函数内找var声明的变量,没有则向外寻找,所以alert(a)指向空间B),有a=underfined,所以弹出underfined;继续执行遇到表达式“=”(var a=200),空间B中a的值修改为200;继续向下执行,遇到第二个alert(a),a指向空间B,所以弹出200

4,执行完cc()后,继续顺序执行,遇到第三个alert(a),指向空间A,弹出100

5,继续执行,遇到var a,由于没有表达式,所以空间A中a的值不变,仍是100

6,继续顺序执行,遇到第四个alert(a),指向空间A,弹出100

7,继续执行,遇到var a =300,有表达式“=”,所以空间A中a值修改为300

8,继续顺序执行,遇到第五个alert(a),指向空间A,弹出300

 

推荐参考网址:http://www.cnblogs.com/lonelyxmas/p/3990954.html

 

 

© 著作权归作者所有

苏苏不是玛丽苏
粉丝 1
博文 36
码字总数 6882
作品 0
吉林
私信 提问
JavaScript 需要掌握的知识

不仅仅是面试,JavaScript 开发者都应该知道的十个概念 深入理解javascript原型和闭包(完结) javascript深入理解js闭包 js作用域 JS之作用域与闭包 JavaScript内存优化 可爱的小熊 js内存回...

IT追寻者
2016/06/25
0
0
《前端面试手记》之JavaScript基础知识梳理(下)

👇 内容速览 👇 实现ES5继承的4种方法 原型和原型链 作用域和作用域链 Event Loop 执行上下文 闭包的理解和分析 🔍查看全部教程 / 阅读原文🔍 ES5继承 题目:ES5中常用继承方法。 方...

godbmw
04/03
0
0
「作用域链终结者」JavaScript是如何执行的?

前言 掘金上关于作用域和作用域链的讨论非常多,但少有人来讲清楚JS中相关的机制,这里我就捡一些大佬们看剩的知识,来讲讲理解作用域之前的准备。 带着这些问题看文章: 是如何编译执行的?...

前端劝退师
03/18
0
0
从 JS 编译原理到作用域(链)及闭包

虽然作用域相关知识是 JavaScript 的基础, 但要彻底理解必须要从原理入手. 从面试角度来讲, 词法/动态作用域、作用域(链)、变量/函数提升、闭包、垃圾回收 实属一类题目, 打通这几个概念并熟...

YanceyOfficial
04/08
0
0
javascript深入理解js闭包

一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量...

Yamazaki
2012/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基础工具类

package com.atguigu.util;import java.sql.Connection;import java.sql.SQLException;import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid......

architect刘源源
今天
43
0
P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
15
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0
死磕 java同步系列之CountDownLatch源码解析

问题 (1)CountDownLatch是什么? (2)CountDownLatch具有哪些特性? (3)CountDownLatch通常运用在什么场景中? (4)CountDownLatch的初始次数是否可以调整? 简介 CountDownLatch,可以...

彤哥读源码
昨天
6
0
Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部