javascript中的作用域、闭包是一个不好理解的概念,需要慢慢领悟。现在把我自己学习作用域、闭包所理解的东西分享一下。
要领悟闭包必需理解javascript变量的作用域问题。
看下面代码1
var str="test"; //定义str if(true){ var str="hello"; //定义str } alert(str);
会打印输出什么:test 还是 hello?
你会看到hello
看下面代码2
var str="test"; //定义str function a(){ if(true){ var str="hello"; //定义str } } a(); alert(str);
会打印输出什么:test 还是 hello?
你会看到test
让我明白:代码1与代码2比较一下可以看到代码2多了一个function,在javascript中一直描述作用域“函数级”,在a()同定义了一个str,作用域就在a()函数内,与外面定义str没有关系。
我们在学习javascript的时候变量有:全局变量和局部变量
这里提到的全局变量与函数级作用域也有关系。
------------------------------------- ------------------------------------- -------------------------------------
看下面代码3
var str="test"; //定义str alert(str==window.str)
会打印输出什么:true还是false?
你会看到true
看下面代码4
function a(){ str="test"; } a(); alert(str==window.str)
会打印输出什么:true还是false?
你会看到true
让我明白:定义全局变量的两种方式:1.不定义在函数内,2.在fun中不加关键字var,所有的全局变量都是window对象的属性。
------------------------------------- ------------------------------------- -------------------------------------
看下面代码5
(function(){ var str="test"; if(true){ var str="hello"; } alert(str); alert(str==window.str); })()
会打印输出什么:test还是hello? true 还是false?
你会看到hello,false;
让我明白:代码5与代码1看上去很像,但本质已经变了,代码中已经包装了一个匿名函数,既然是函数,那么里面的变量都是函数级的了,使用var定义的str就是函数级的变量,作用范围只能在匿名函数中。而window现在根本没有str这个属性。你可以尝试使用alert(window.str),你会看到undefined,因为str根本不存在。
关于闭包要理解作用的基础上去理解闭包。
也许闭包的说法很多,但我个人觉得《精通javascript》的说法我能更好的理解:闭包意味着内层的函数可以引用存在于包围它的函数内的变量,即使外层函数的执行已经终止。从文字上去理解真是有些困难。
------------------------------------- ------------------------------------- -------------------------------------
看下面代码6
<button id="btnAdd">+</button>
var btnAdd = document.getElementById("btnAdd"); function addNum(){ var num=0; return function(){ alert(num++); } } btnAdd.onclick = addNum();
连续点击button会怎么样呢?
第一次点击弹出:0
第二次点击弹出:1
第三次点击弹出:2
第四次点击弹出:3
...
会延续下去。
为会呢?
让我明白:原来上面是一个闭包,内层函数是一个return 的匿名函数,这个匿名函数去访问包围它的addNum变量num。当在执行btnAdd.onclick = addNum();addNum()就已经终止了,当我们点击button的时候还在访问变量num,也就意味着点击button的时候只执行了这个匿名函数,外层函数没有执行。
------------------------------------- ------------------------------------- -------------------------------------
看下面代码7
<ul> <li><a href="">aa1</a></li> <li><a href="">aa2</a></li> <li><a href="">aa3</a></li> <li><a href="">aa4</a></li> </ul>
var aArg = document.getElementsByTagName("a"); for(var i=0;i<aArg.length;i++){ aArg[i].onclick = function () { alert(i); } }
以上代码会怎么样呢?不管你点击aa1还是aa2还是aa3还是aa4都会统一弹出:4,
是这为什么呢?
上面是一个闭包,但我们在点击的时候代码已经执行完成,代码执行完成后i的值是4 。所以一直会弹4。(闭包允许你引用父函数中的变量,但提供的值并非该变量创建时的值,而是父函数范围内的最终值)。
明白这一点所以我们必须创建一个作用域来保存每次for循环时i的值。
看下面代码8
var aArg = document.getElementsByTagName("a"); for (var i = 0; i < aArg.length; i++) { (function () { var index = i; aArg[i].onclick = function () { alert(index); } })() }
代码8中有一个立即执行函数,来保存i的值。
这样点aa1的时候,弹出0
这样点aa2的时候,弹出1
这样点aa3的时候,弹出2
这样点aa4的时候,弹出3
理解好作用域与闭包我们可以简化很多工作,javascript里面有很多细节的东西,学会javascript是简单的事情,但想学习好有很长的路要走。有兴趣的朋友加QQ:460666546
相关推荐
JavaScript闭包深入理解.pdf
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态...本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。
本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAscript语言规范来使读者可以更深入的理解闭包。闭包是Closure, 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系
JavaScript闭包的定义和理解,含代码示例
本文结合 ECMA 262 规范详解了闭包的内部工作机制,让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中,真正领会到闭包的实质。
闭包是ECMAScript (JavaScript)最强大的特性之一,但用好闭包的前提是必须理解闭包。闭包的创建相对容易,人们甚至会在不经意间创建闭包,但这些无意创建的闭包却存在潜在的危害,尤其是在比较常见的浏览器环境下...
详解JavaScript闭包问题 闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaScript库...
理解 JavaScript 闭包 要成为高级 JavaScript 程序员,就必须理解闭包
网上的例子很多,讲解的和理解起来的简易程度不禁相同,整理的例子和吸收的帖子供大家参考
对于初学者来说,理解Javascript闭包(closure)还是比较困难的,而撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目,让初学者理解起来更加容易一些。
为了帮助大家快速和较好地理解JavaScript函数中的闭包,本文对JavaScript的闭包进行了分析并进行简易的代码演示,希望本文能够给有需要的人带来一点小小的帮助。
要成为高级 JavaScript 程序员,就必须理解闭包。 本文结合 ECMA 262 规范详解了闭包的内部工作机制,让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 ...
javascript深入理解js闭包.docx
javascript原型和闭包
闭包是 ECMAScript (JavaScript)最强大的特性之一,但用好闭包的前提是必须 理解闭包。闭包的创建相对容易,人们甚至会在不经意间创建闭包,但这些无意创建的闭包却存在潜在的危害 ,尤其是在比较常见的浏览器环境...
深入理解JavaScript的闭包技术整理.pdf
js闭包 • 每个函数都有一个包含词法环境的执行上下文,它的词法环境确定了函数内的变量赋值以及对外部环境的引用。...• JavaScript中闭包作用域是词法作用域,即它在代码写好之后就被静态决定了它的作用域。
有什么用,今天在网上看到了一篇讲JavaScript闭包的文章(原文链接),讲得非常好,这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了,在此写出来和大家分享一下,希望不理解JavaScript闭包的朋友...
最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。