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 相关文章推荐
Javascript中For In语句用法实例
May 14 Javascript
java必学必会之static关键字
Dec 03 Javascript
详解JavaScript对象类型
Jun 16 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
thinkPHP实现签到功能的方法
2017/03/15 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
php-fpm中max_children的配置
2019/03/15 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python多进程间通信代码实例
2019/09/30 Python
pytorch之添加BN的实现
2020/01/06 Python
tensorflow多维张量计算实例
2020/02/11 Python
Python如何批量生成和调用变量
2020/11/21 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
成教自我鉴定
2013/10/27 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
班风学风建设方案
2014/05/06 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2015年调度员工作总结
2015/04/30 职场文书