根据一段代码浅谈Javascript闭包_javascript技巧

复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return f2;
}

这里的闭包是f1,封闭了一个变量n和一个函数f2。

我们先无视nAdd,尽量保持原貌重写一下这个函数。

复制代码 代码如下:

function f1(){
var n = 999;
var f2 = function(){ alert(n); };
return f2;
}
var result = f1();
result();

js中各个变量以function为单元进行封装,当在function内部找不到某一变量时,function会向其所在的上一单元(上下文)中进行查找,一直查找到顶层的window域。
这时就出现一个疑问:这个查找过程是以函数引用位置为起点还是函数体定义的位置为起点?
在上面这一段代码中,result所在域是window,但是实际的输出结果是f1内部的n值,所以可以得出结论:变量查找的起点是函数体定义的位置。

现在再回过头来看nAdd(第一段代码)。如我们所知,没有关键字var定义的变量默认进入window域,所以nAdd实际为window.nAdd。这就等同于如下代码:

复制代码 代码如下:

var nAdd;
function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}

那么根据我们对result的分析,nAdd的执行将影响f1中n的值。
所以有:

复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}
var result = f1();
result();
nAdd();
result();

这段代码执行最终的输出结果为1000。

再看这种情况:

复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}

f1()(); //<--p1
nAdd();
f1()(); //<--p2

简述一下执行过程:
p1位置,f1封装了一个匿名的闭包A,在返回A闭包中的函数A:f2后继而执行A:f2,A:f2输出变量A:n,结果是999。
与此同时,nAdd被赋值为A闭包中的一个函数,下一行执行nAdd即让A:n的值+1。
p2位置,f1封装匿名的闭包B,所进行的操作都是针对闭包B的,随后执行B:f2输出的是B:n,所以最后的结果依然是999。
A和B是两个独立的“包”,互不影响。

改写一下函数的调用部分:

复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}

var result = f1();
result();
nAdd();
f1()();
result(); // <--p3

p3位置不意外地输出了1000。

时间: 2024-12-02 16:49:00

根据一段代码浅谈Javascript闭包_javascript技巧的相关文章

谈一谈javascript闭包_javascript技巧

下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. function f1(){ var n=999; } alert(n)

浅谈javascript属性onresize_javascript技巧

浅谈javascript属性onresize //获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = docum

继续学习javascript闭包_javascript技巧

一.什么是闭包? 官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包.不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的"闭包".看下面这段代码: function a() { var i = 0; function b() { alert(

干货分享:让你分分钟学会javascript闭包_javascript技巧

闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包! 1.闭包--爱的初体验 在接触一个新技术的时候,我首先会做的一件事就是:找它的demo code.对于码农们来说,代码有时候比自然语言更能理解一个事物. 其实,闭包无处不在,比如:jQuery.zepto的主要代码都包含在一个大的闭包中,所以下面我先写一个最简单最

理解Javascript闭包_javascript技巧

闭包是ECMAScript一个很重要的特征,但是却很难用合适的定义来描述它.虽然闭包很难清晰地描述,但是,却很容易创建,或者说,不小心创建.然而,闭包的存在其实是有一定的潜在问题的.为了避免"不小心"地创建闭包,以及更好地利用闭包的优点,有必要理解闭包的机制. 闭包的定义 关于闭包,有太多的定义,特别是有一些定义非常抽象,象这个: A "closure" is an expression (typically a function) that can have fr

再谈JavaScript线程_javascript技巧

代码判断一: <div id="div"> click me </div> <script> var div=document.getElementById("div"); div.addEventListener('click',function(){ alert('You have clicked me!'); }); for(var i =0; i<999999999;i++){ console.log(i); } &

浅谈 Mousewheel 事件_javascript技巧

Mousewheel Event in JavaScript IE6, IE7, IE8, Opera 10+, Safari 5+ support mousewheel. Firefox 3.5+ support DOMMouseScroll. IE6, IE7, IE8, Opera 10+, Safari 5+ support event.wheelDelta. Firefox 3.5+, Opera 10+ support event.detail. The event.wheelDel

浅谈JavaScript for循环 闭包_javascript技巧

有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript&quo

浅谈Javascript数组的使用_javascript技巧

上一篇说了数组的索引,这一篇说下数组的使用. 数组的大小 js的数组可以动态调整大小,更确切点说,它没有数组越界的概念,a[a.length]没什么问题.比如声明一个数组a = [1, 3, 5],现在的数组大小是3,最后一个元素的索引是2,但是你依然可以使用a[3],访问a[3]返回的是undefined,给a[3]赋值:a[3] = 7,是给数组a添加了一个元素,现在数组a的长度是4了.你可以试试把下面这段代码放到浏览器里运行下: var a = []; for(int i = 0; i <