JavaSript中变量的作用域闭包的深入理解


Posted in Javascript onMay 12, 2014
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
/* 
* 1.js中的变量都是公用的. 
2.js中没有静态变量 
3.闭包:函数内部可以调用函数外部的变量;反之,则不行 
*/ var r=10; 
function test1(){ 
var r2="abc"; 
//alert(r) 
} 
//alert(r2);//不能访问的函数内部的r2 
test1(); 
//嵌套的函数中也ok啦 
function test2(num1){ 
function test3(num2,num3){ 
return num2+num3+num1; 
} 
return test3(10,20) 
} 
//alert(test2(30)); 
//---------循环中的闭包------------------------ 
function testfun(){ 
var r=1; 
var arr=[]; 
for(var x=0;x<3;x++){ 
r++; 
arr[x]=function(){ 
return r; 
} 
} 
return arr; 
} 
alert("testfun:"+testfun()); 
var arr2=testfun(); 
alert("arr:"+arr2[0]); 
alert("arr:"+arr2[1]()); 
alert("arr:"+arr2[2]()); 
//==========以上三个弹出框的结果都是4========== 
/*分析原因: 
理解一下在JavaScript中函数是什么? 
函数就是一段可执行的代码块,函数也是可以用一个变量表示,比如函数的第二种定义方式 
var add=new Function("a","return a+10");底层的本质就是这个函数名指向 
了这一段为变量而创建的可执行的代码。 
* 首先当testfun函数执行完毕以后,arr[0],arr[1],arr[]中都是存储了相同的 
可执行代码块function(){ 
return r 
}也就是说上面三个是函数变量而已,要执行它们只需要在变量名称后面加()就ok了 
而且这个时候r的值4 
当执行arr[0]()相当于执行了这个代码块中的代码。 
所以最终的结果return r,当然返回4了。 
*/ 
</script> 
</head> 
<body> 
</body> 
</html>
Javascript 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 #Javascript
JavaScript中对象属性的添加和删除示例
May 12 #Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 #Javascript
Javascript中对象继承的实现小例
May 12 #Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 #Javascript
js图片处理示例代码
May 12 #Javascript
jquery实现的一个简单进度条效果实例
May 12 #Javascript
You might like
php获取文件类型和文件信息的方法
2015/07/10 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
javascript自执行函数
2017/02/10 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python技能之数据导出excel的实例代码
2017/08/11 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Python中偏函数用法示例
2018/06/07 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
PHP中如何使用Cookie
2015/10/28 面试题
北京华建集团SQL面试题
2014/06/03 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
员工培训邀请函
2014/01/11 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
退休欢送会致辞
2015/07/31 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
python执行js代码的方法
2021/05/13 Python