解析JavaScript模仿块级作用域


Posted in Javascript onDecember 29, 2016

javaScript 没有块级作用域的概念。这意味着在块语句中定义的变量,实际上是在包含函数中而非语句中创建的,来看下面的例子:

function outputNumbers(count){
 for (var i=0; i < count; i++){
 alert(i);
 }
 alert(i); //计数
}

这个函数中定义了一个for 循环,而变量i 的初始值被设置为0。

在Java、C++等语言中,变量i

只会在for 循环的语句块中有定义,循环一旦结束,变量i 就会被销毁。可是在JavaScrip 中,变量i

是定义在ouputNumbers()的活动对象中的,因此从它有定义开始,就可以在函数内部随处访问它。即

使像下面这样错误地重新声明同一个变量,也不会改变它的值。

function outputNumbers(count){
  for (var i=0; i < count; i++){
  alert(i);
 }
 var i; //重新声明变量
 alert(i); //计数
}

JavaScript 从来不会告诉你是否多次声明了同一个变量;遇到这种情况,它只会对后续的声明视而不见(不过,它会执行后续声明中的变量初始化)。匿名函数可以用来模仿块级作用域并避免这个问题。

用作块级作用域(通常称为私有作用域)的匿名函数的语法如下所示:

(function(){
 //这里是块级作用域
})();

以上代码定义并立即调用了一个匿名函数。将函数声明包含在一对圆括号中,表示它实际上是一个函数表达式。而紧随其后的另一对圆括号会立即调用这个函数。如果有读者感觉这种语法不太好理解,可以再看看下面这个例子:

var count = 5;
outputNumbers(count);

这里初始化了变量count,将其值设置为5。当然,这里的变量是没有必要的,因为可以把值直接传给函数。为了让代码更简洁,我们在调用函数时用5 来代替变量count,如下所示:

outputNumbers(5);

这样做之所以可行,是因为变量只不过是值的另一种表现形式,因此用实际的值替换变量没有问题。

再看下面的例子:

var someFunction = function(){
 //这里是块级作用域
};
someFunction();

这个例子先定义了一个函数,然后立即调用了它。定义函数的方式是创建一个匿名函数,并把匿名函数赋值给变量someFunction。而调用函数的方式是在函数名称后面添加一对圆括号,即someFunction()。通过前面的例子我们知道,可以使用实际的值来取代变量count,那在这里是不是也可以用函数的值直接取代函数名呢? 然而,下面的代码却会导致错误。

function(){
 //这里是块级作用域
}(); //出错!

这段代码会导致语法错误,是因为JavaScript 将function 关键字当作一个函数声明的开始,而函数声明后面不能跟圆括号。然而,函数表达式的后面可以跟圆括号。要将函数声明转换成函数表达式,只要像下面这样给它加上一对圆括号即可。

(function(){
 //这里是块级作用域
})();

无论在什么地方,只要临时需要一些变量,就可以使用私有作用域,例如:

function outputNumbers(count){
 (function () {
   for (var i=0; i < count; i++){
   alert(i);
  }
 })();
 alert(i); //导致一个错误!
}

在这个重写后的outputNumbers()函数中,我们在for 循环外部插入了一个私有作用域。在匿名函数中定义的任何变量,都会在执行结束时被销毁。因此,变量i 只能在循环中使用,使用后即被销毁。

而在私有作用域中能够访问变量count,是因为这个匿名函数是一个闭包,它能够访问包含作用域中的所有变量。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
jquery offset函数应用实例
Nov 14 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 #Javascript
vue实现列表的添加点击
Dec 29 #Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 #Javascript
基于javascript的Form表单验证
Dec 29 #Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 #Javascript
bootstrap导航条实现代码
Dec 28 #Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 #Javascript
You might like
php 中英文语言转换类
2011/09/07 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
详解Angular的8个主要构造块
2017/06/20 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python中的random()方法的使用介绍
2015/05/15 Python
python实现红包裂变算法
2016/02/16 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
会计专业自荐信
2014/06/03 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
学校教师培训工作总结
2015/10/14 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书