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 相关文章推荐
jquery中event对象属性与方法小结
Dec 18 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
python实现端口转发器的方法
2015/03/13 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
python opencv如何实现图片绘制
2020/01/19 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
单位消防安全制度
2014/01/12 职场文书
党校学习党性分析材料
2014/12/19 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS