js中作用域的实例解析


Posted in Javascript onMarch 16, 2017

首先,要了解一下作用域的概念:作用--读、写,域--范围或空间。作用域:可用来进行读、写操作的范围或者空间。

其次,再来看看浏览器读取js文件(script标签内的内容)的步骤。

第一步:预解析-----根据var function 把可能用到的参数或函数找出来,放在内存里(这相当于放到仓库里面)

例1:

<script>
alert(a)
var a=1
function fn1(){alert(2)}
</script>

根据var和function可以找到:a  fn1

预解析的过程中会自动给变量赋值undefined,即:a=undefined;而函数的值就函数本身,即:fn1=function fn1(){alert(2)}

所以预解析后:a = undefined, fn1=function fn1(){alert(2)}

如果函数和变量重名,那么只保留有值的那个。

例2:

<script>
alert(a)
var a=1
function a(){alert(2)}
var a=10
</script>

根据var和function可以找到:a  a  a

预解析的过程中:a=undefined, a=function a(){alert(2)}, a=undefined

预解析之后就只有 a=function a(){alert(2)}

例3:

如果例2中var a=10后面还有一个函数function a(){alert(4)}

那么预解析之后的结果就变成了:a=function a(){alert(4)}。因为后一个有值的会覆盖前一个。

第二步:就是从上而下逐行解读代码了

例4:

首先我们知道下面的代码预解析的结果是:a=function a(){alert(4)}

<script>
alert(a)                //读这一行的时候a=function a(){alert(4)},所以打印出来的是function a(){alert(4)}
var a=1                //读这一的行的是后,是给a重新赋值了,所以a=1
alert(a)                //读这一行的时候a=1,所以打印出来的是1
function a(){alert(2)}     //读这一行的时候,没有对a重新赋值,也不会打印任何东西,因为函数没被调用。
alert(a)               //读这一行的时候a=1,所以打印出来的是1
var a=10             //读这一的行的是后,是给a重新赋值了,所以a=10
alert(a)              //读这一行的时候a=10,所以打印出来的是10
function a(){alert(4)}    //读这一行的时候,没有对a重新赋值,也不会打印任何东西,因为函数没被调用。
alert(a)              //读这一行的时候a=10,所以打印出来的是10
</script>

---------------------上面的内容,帮助去理解预解析的概念,还没有用到“域”。而对于预解析来说,只要遇到一个“域”,就会在这个“域”内发生预解析------------------------

例5:

以下代码预解析:a=undefined,fn1=funciton fn1(){alert(a)var a=2;},然后开始执行代码

<script>
var a=1     //读到这一行的时,给a赋值,a=1
funciton fn1(){alert(a);var a=2;} //读到这一行的时,什么都没发生
fn1();//读到这一行时,函数被调用。也分为两步
       //1、函数被调用首先进行这个函数域的预解析,并把自己的预解析放在自己的仓库里面。
       //2、逐行解读代码:当读到alert(a)时,函数域的预解析结果为a=undefined,所以打印出undefined。读到var a=2时,将自己预解析的结果变为a=2.
alert(a);//读到这一行的时候a=1,打印出1
</script>

例6:在例5的基础上进行一个小改动,把var a=2改为a=2,则输出的结果又不同。

<script>
var a=1  //a=1
funciton fn1(){alert(a); a=2;}
fn1();  //在函数调用的时候。因为函数内部没有“var”,所以预解析没有结果。当执行函数中的alert(a),就会到函数外(父域)找a,此时a=1,所以打印出1
         //函数a=2,是给全局变量赋值,所以a=2
alert(a);//因为a=2,所以打印出2
</script>

例7:在例6基础上,改动一下

<script>
var a=1  
funciton fn1(a){alert(a); a=2;}
fn1();        
alert(a);
</script>

打印出的结果会是:undefined,1。大家自己思考吧。提示:funciton fn1(a)相当于funciton fn1(var a)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
JS实现简易计算器
Feb 14 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 #Javascript
JS实现页面打印功能
Mar 16 #Javascript
Vue中添加过渡效果的方法
Mar 16 #Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 #Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 #Javascript
es6的数字处理的方法(5个)
Mar 16 #Javascript
Webpack打包慢问题的完美解决方法
Mar 16 #Javascript
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
Javascript delete 引用类型对象
2013/11/01 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
详解Python自建logging模块
2018/01/29 Python
Python实现的计算器功能示例
2018/04/26 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
新浪网技术部笔试题
2016/08/26 面试题
残疾人创业典型事迹
2014/02/01 职场文书
给校长的建议书
2014/03/12 职场文书
小班开学寄语
2014/04/04 职场文书
简单租房协议书范本
2014/08/20 职场文书
护士节活动总结
2014/08/29 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
结婚主持人致辞
2015/07/28 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript