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解决innerText浏览器兼容问题思路代码
May 17 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
js实现简单的无缝轮播效果
Sep 05 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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实现图片旋转效果实例代码
2014/10/01 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
应聘自荐信
2013/12/14 职场文书
九年级家长会邀请函
2014/01/15 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
三八节活动主持词
2015/07/04 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python