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对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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实现文件安全下载
2006/10/09 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Flask框架配置与调试操作示例
2018/07/23 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
18岁生日感言
2014/01/12 职场文书
部队万能检讨书
2014/02/20 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js