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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP 上传文件大小限制
2009/07/05 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php绘制一个矩形的方法
2015/01/24 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
mouse_on_title.js
2006/08/25 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
javascript实现画板功能
2020/04/12 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
旅游项目开发策划书
2014/01/18 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis