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

 更新时间:2014年05月12日 10:36:02   作者:  
js中的变量都是公用的没有静态变量,下面为大家介绍下变量的作用域闭包,需要的朋友可以参考下
复制代码 代码如下:

<!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 面向对象function详解及实例代码

    javascript 面向对象function详解及实例代码

    这篇文章主要介绍了javascript 面向对象function详解及实例代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • JS实现下拉菜单赋值到文本框的方法

    JS实现下拉菜单赋值到文本框的方法

    这篇文章主要介绍了JS下拉菜单赋值到文本框的方法,涉及javascript页面元素的选择与赋值的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序之滑动页面隐藏和显示组件功能的实现代码

    微信小程序之滑动页面隐藏和显示组件功能的实现代码

    这篇文章主要介绍了微信小程序之滑动页面隐藏和显示组件功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • WEB 前端开发中防治重复提交的实现方法

    WEB 前端开发中防治重复提交的实现方法

    这篇文章主要介绍了JS WEB 前端开发中防治重复提交的实现方法,涉及到表单提交的几种方式介绍,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • JavaScript中document.querySelector函数用法介绍

    JavaScript中document.querySelector函数用法介绍

    这篇文章主要给大家介绍了关于JavaScript中document.querySelector函数用法的相关资料,document.querySelector是JavaScript中的一个内置方法,用于通过CSS选择器选择文档中的第一个匹配元素,需要的朋友可以参考下
    2023-08-08
  • JavaScript数组Array的一些常用方法总结

    JavaScript数组Array的一些常用方法总结

    JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象,下面这篇文章主要给大家介绍了关于JavaScript数组Array的一些常用方法,需要的朋友可以参考下
    2021-11-11
  • 微信小程序中post方法与get方法的封装

    微信小程序中post方法与get方法的封装

    这篇文章主要介绍了微信小程序中post方法与get方法的封装的相关资料,希望通过本文能帮助到大家,让大家掌握如何封装,需要的朋友可以参考下
    2017-09-09
  • 微信小程序开发实现轮播图

    微信小程序开发实现轮播图

    这篇文章主要为大家详细介绍了微信小程序开发实现轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 移动端界面的适配

    移动端界面的适配

    本文主要介绍了移动端页面适配相关知识,用于解决在所有手机上看到字体的大小都一样问题。下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript中的伪数组用法及说明

    JavaScript中的伪数组用法及说明

    这篇文章主要介绍了JavaScript中的伪数组用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论