【例1】

<script>
function t1(){
var age = 20;
function t2(){
alert(age);
}
return t2;
}
var tmp = t1();
var age = 99;
tmp();
</script>

弹出 20

【分析】

function t1(){
var age = ;
function t2(){
alert(age);
}
return t2;
}

在大部分的语言中,t1 被调用执行,则申请内存,并把其局部变量 push 入栈,t1 函数执行完毕,内部的局部变量,随着函数的退出而销毁,导致 age = 20 的局部变量消失。

因此,t1(); 执行完毕之后,按 C 语言的理解,t1 内的局部变量都释放了。

function t1(){
    var age = ;
function t2(){
alert(age);
}
return t2;
}

在 js 中,t1 执行过程中,又生成了 t2,

而从作用域上来说,t2 能访问到 age = 20,

于是 “ age = 20 ” 没有消失,而是被 t2 捕捉到了,

同时 “ age = 20 ” 与返回的 t1 函数形打了个包返回来了,成了一个 “ 环境包 ”,

这个包属于 t2,所以叫 “ 闭包 ”。

t2 把周围的环境打了包,也就是说 t2 是由自己的生态环境的,

即 即使t1 执行完毕,通过 t2 ,依然能访问该变量:这种情况,函数并非孤立的函数,甚至把其周围的变量环境,形成了一个封闭的环境包,共同返回。

一句话概括:函数的作用域取决于声明时,而不取决于调用时。

【例2】

 function prev(){
var leg = "Alexis";
var arsenal_leg = function(){
return leg;
}
return arsenal_leg; //前半赛季阿森纳的大腿是桑切斯
} function after(){ //来到了后半赛季
var leg = "Giroud";
var arsenal_leg = prev(); //调用prev(),arsenal_leg 函数来到了后半赛季
alert(arsenal_leg());
}
after(); //谁是大腿 </script>

弹出:Alexis

【分析】:

line:14 执行 after();

line:12 alert arsenal_leg();

line:11 aesenal_leg() = prev();

line:6  return  arsenal_leg();

line:3  函数声明 return leg;【真正执行的函数】

line:2  var leg = "Alexis";【作用域要从 函数声明之时寻找】

 

例3闭包计数器,多人开发 js 程序,需要一个全局的计数器

解决方案① 设立一个全局变量

window.cnt = 0;

调用 ++window.cnt

这个方案可行但是,污染了全局变量;其次比人的程序中,也可能会含有 window.cnt = ***; 则该计数器就会被损坏(所以要避免使用全局变量)

方案② 使用闭包维护一个别人污染不到的变量做技术器

<script>

function counter(){
var cnt = 0;
var cnter = function (){
return ++cnt;
}
return cnter;
} var inc = counter();
alert(inc());
alert(inc());
alert(inc()); </script>

弹出 3 次,分别是:1,2,3

简化上面的程序:

<script>

var inc = (function counter(){
var cnt = 0;
return function (){
return ++cnt;
}
})(); alert(inc());
alert(inc());
alert(inc()); </script>

再改版上面的程序(inc 依然是全局变量。在工作中,一般避免全局污染或冲突):

方案 ① 统一放在一个全局对象上,如 jQuery -> $

<script>

$ = {};
//模拟jQuery
$.cnt = (function(){
var cnt = 0;
return function cnter(){
return ++cnt;
}
})(); alert($.cnt());
alert($.cnt());
alert($.cnt()); </script>

方案 ② 每个人使用自己的命名空间(其实就是把自己的变量、函数都放在一个对象里)

<script>

var Dee = {}; //一般用姓名做命名空间
Dee.cnt = (function(){
var cnt = 0;
return function cnter(){
return ++cnt;
}
})(); alert(Dee.cnt());
alert(Dee.cnt());
alert(Dee.cnt()); </script>

【例4】要求:点击 4 个 li,分别弹出 0,1,2,3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>阿森纳</li>
<li>切尔西</li>
<li>曼城</li>
<li>利物浦</li>
</ul>
</body>
<script> for(var i = 0, lis = document.getElementsByTagName("li"), len = lis.length; i < len; i++){
lis[i].onclick = (function(i){
return function(){
alert(i);
}
})(i);
} </script>
</html>

【错误的写法】(会弹出 4,4,4,4):

<script>

for(var i = 0, lis = document.getElementsByTagName("li"), len = lis.length; i < len; i++){
lis[i].onclick = function(){
alert(i);
}
} </script>

【错误的写法分析】:

(回答者杨志):

" 这个for循环会立即执行完毕,那么当onclick触发时,inner function查找变量 i 时,会在AO+scope中找,AO中没有,scope中的变量i已经成为 link.length. ",

在运用了闭包之后,

" 这时,如果inner function被触发,他会从自己的AO以及scope(outer function的AO 和 window scope)中找寻变量i. 可以看到outer function的AO中已经包

含了i,而且对于这个for循环,会有对应有N个(function(){})() 被创建执行。所以每个inner function都有一个特定的包含了变量 i 的outer function。这样

就可以顺利输出0,1,2,3 。

结论: 我们可以看到,闭包其实就是因为Scope产生的,所以,广义上来讲,所有函数都是闭包。"

" 所谓的异步函数,是包括ajax,事件触发,setTimeout , setInterval等回调的函数。

当解析文档流时如果遇到js代码,会立即执行。如果这期间有异步函数被触发,会被存放在队列结构中。当之前的代码执行完毕后,浏览器查看此队列,如有待执行

函数,则执行;没有则等待触发。

所以,那个i 值会成为最大的那个。因为for循环在异步函数被执行前,已经跑完了。"

参考:关于 Js 循环添加事件时闭包的影响有哪些解法?

Javascript 笔记与总结(1-5)闭包的更多相关文章

  1. [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  2. [Effective JavaScript 笔记]第3章:使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  3. [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  4. Jquery和Javascript 实际项目中写法基础-闭包 (2)

    一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...

  5. [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  6. [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  7. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  8. 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight

    做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...

  9. 【译】学习JavaScript中提升、作用域、闭包的终极指南

    这似乎令人惊讶,但在我看来,理解JavaScript语言最重要和最基本的概念是理解执行上下文.通过正确学习它,你将很好地学习更多高级主题,如提升,作用域链和闭包.考虑到这一点,究竟什么是"执 ...

  10. JavaScript笔记目录

    JavaScript笔记目录 一.JavaScript简介 二.在HTML中使用JavaScript ...持续更新中,敬请期待

随机推荐

  1. Linux C 单链表 读取文件 并排序 实例并解释

    C的指针挺头疼的,先看一个例子: 给指针赋值和通过指针进行赋值这两种操作的差别确实让人费解.谨记区分的重要方法是:如果对左操作数进行解引用,则修改的是指针所指对象的值:    如果没有使用解引用操作, ...

  2. 按键的使用方法(三)-------verilog

    按键的使用方法三:一键三用: 点击.长击和双击. 代码: /********************************Copyright***************************** ...

  3. SSH 超时断开连接解决办法

    配置服务器端: vi /etc/ssh/sshd.conf ClientAliveInterval 120 #以秒为单位(可以改大些) ClientAliveCountMax 0 #发现客户端没有相应 ...

  4. C#对XML进行操作(添加、修改)

    XML文档内容如下: <?xml version="1.0" encoding="utf-8"?> <root> <first i ...

  5. hdu 4165 dp

    可以用卡特兰数做 以下分析转自:http://www.cnblogs.com/kevinACMer/p/3724640.html?utm_source=tuicool 这道题之前自己做的时候并没有反应 ...

  6. ☆ fragment和fragmentactivity解析 (转)

    一.为什么要使用Fragment  1.当我们需要动态的多界面切换的时候,就需要将UI元素和Activity融合成一 个模块.在2.3中我们一般通过各种Activity中进行跳转来实现多界面的跳转和单 ...

  7. org.apache.log4j与org.apache.commons.logging这两个包有什么区别

    apache common logging是一种log的框架接口,它本身并不实现log记录的功能,而是在运行时动态查找目前存在的日志库,调用相关的日志函数,从而隐藏具体的日志实现log4j是具体的日志 ...

  8. H5开发之Eclipes 编码乱码问题

    1.编码不对 a.对某文件或某工程更改编码: 鼠标移到工程名或文件名,右键->Properties->Resource->Text file enCoding ->更改编码(G ...

  9. Xamarin提示Build-tools版本过老

    Xamarin提示Build-tools版本过老 错误信息:G:\XamarinDemo\Xamarin.Forms-master\packages\Xamarin.Android.Support.V ...

  10. BZOJ3165 : [Heoi2013]Segment

    建立线段树,每个节点维护该区间内的最优线段. 插入线段时,在线段树上分裂成$O(\log n)$棵子树,若与当前点的最优线段不相交,那么取较优的,否则暴力递归子树. 查询时在叶子到根路径上所有点的最优 ...