JavaScript的作用域和块级作用域概念理解


Posted in Javascript onSeptember 21, 2014

作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。讲到这里,首先理解两个概念:块级作用域与函数作用域。

什么是块级作用域呢?

任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。

函数作用域就好理解了(*^__^*) ,定义在函数中的参数和变量在函数外部是不可见的。

大多数类C语言都拥有块级作用域,JS却没有。请看下文demo:

//C语言 
#include <stdio.h> 
void main() 
{ 
int i=2; 
i--; 
if(i) 
{ 
int j=3; 
} 
printf("%d/n",j); 
}

运行这段代码,会出现“use an undefined variable:j”的错误。可以看到,C语言拥有块级作用域,因为j是在if的语句块中定义的,因此,它在块外是无法访问的。

而JS是如何表现的呢,再看另一个demo:

functin test(){ 
for(var i=0;i<3;i++){ 
} 
alert(i); 
} 
test();

运行这段代码,弹出"3",可见,在块外,块中定义的变量i仍然是可以访问的。也就是说,JS并不支持块级作用域,它只支持函数作用域,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。

那么我们该如何使JS拥有块级作用域呢?是否还记得,在一个函数中定义的变量,当这个函数调用完后,变量会被销毁,我们是否可以用这个特性来模拟出JS的块级作用域呢?看下面这个DEMO:

function test(){ 
(function (){ 
for(var i=0;i<4;i++){ 
} 
})(); 
alert(i); 
} 
test();

这时候再次运行,会弹出"i"未定义的错误,哈哈,实现了吧~~~这里,我们把for语句块放到了一个闭包之中,然后调用这个函数,当函数调用完毕,变量i自动销毁,因此,我们在块外便无法访问了。

JS的闭包特性is the most important feature((*^__^*) 大家懂的)。在JS中,为了防止命名冲突,我们应该尽量避免使用全局变量和全局函数。那么,该如何避免呢?不错,正如上文demo所示,我们可以把要定义的所有内容放入到一个

(function (){ 
//内容 
})();

之中,这时候,我们是不是相当于给它们的外层添加了一个函数作用域呢?该作用域之外的程序是无法访问它们的。

Javascript 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
js实现五星评价功能
Mar 08 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
JS实现图片切换特效
Dec 23 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 #Javascript
原生JavaScript实现合并多个数组示例
Sep 21 #Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 #Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 #Javascript
判断window.onload是否多次使用的方法
Sep 21 #Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 #Javascript
JS实现清除指定cookies的方法
Sep 20 #Javascript
You might like
PHP里的中文变量说明
2011/07/23 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python列表操作实例
2015/01/14 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python实现word2Vec model过程解析
2019/12/16 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
后勤主管岗位职责
2014/03/01 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
新学期标语
2014/06/30 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS