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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php笔记之:AOP的应用
2013/04/24 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
react native 文字轮播的实现示例
2018/07/27 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
python先序遍历二叉树问题
2017/11/10 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
四下基层实施方案
2014/03/28 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
老干部工作汇报材料
2014/10/28 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL