《JavaScript权威指南》学习——js闭包

序:闭包这个玩意啊~在很多没有代码块的语言中都会出现,已经成为大多程序员入门的一道坎,闭包让很多程序员觉得晦涩(事实上百度一下这个名词,真的说的很晦涩啊亲==|||),本座第一次知道闭包这个名词是从《JavaScript权威指南》中读到的,当时还是2015年的3月份,我刚开始看寒假购买的书,话说那时我还没有和初恋分手,我清楚的记得我在从徐州回苏州的火车上全程研究这本《JavaScript权威指南》的屌丝场景(异地恋),前女友说这本书封面上的犀牛丑死了,我说“你懂啥!”==|||

话不多说,经过一番回忆,我想起来闭包这个东西直到分手后的5个月里都没有搞清楚,直到某一天我在实验室写完了三段js代码对比后,我了悟了这本神书的讲的闭包思想!

先来看下闭包的百度百科,且看(配图):

闭包是可以包含自由(未绑定到特定对象)变量的代码块;这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。“闭包” 一词来源于以下两者的结合:要执行的代码块(由于自由变量被包含在代码块中,这些自由变量以及它们引用的对象没有被释放)和为自由变量提供绑定的计算环境(作用域)。

在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java(Java8及以上)等语言中都能找到对闭包不同程度的支持。

乍一看,百度说的神乎其神,什么代码块,什么局部变量,说白了,我们只要搞清js的代码的一点原理:作用域的释放和存在问题。

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

闭包有三个特性:

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

对比下面三段代码:

且看看下面代码:

//全局变量的应用和变化

Var GLOBAL = 1          //全局变量

function change_global(){

    var GLOBAL = 2;             //重新定义了GLOBAL作为局部变量,不加var则变成了引用全局变量

    alert(GLOBAL);

}

change_global();

Alert(GLOBAL);

浏览器显示:先2,后1。

结论:验证了一点,函数改变了局部变量,但没有改变全局变量,但是一旦去掉了局部变量GLOBAL前面的var那么结果就是2,2。函数执行完后,函数的作用域链被销毁,随之局部变量被销毁了!全局变量要等到页面关闭(程序结束)被销毁

如果很熟悉js语法和作用域链的,可以跳过上面的代码,我是为了说下面的代码!

且看下面代码:

//z是个普通的function,执行一次作用域链就被销毁

var function z(t){

    var s=[1,2,3];              //局部变量s

    s.push(t);          //往s数组中添加数字

    return s;

}

z(4);   //执行后销毁这次

z(5);   //执行后销毁这次

alert(z(6));    //执行后销毁这次

浏览器显示:1,2,3,6。

结论:4,5呢?当然是因为前两次执行结束后函数被销毁了,所以最后只有6被添加进去了,充分证明了js执行函数在内存中的原理——执行完就销毁function中的一切!

上面的话不完全对,真的是一切吗?

且看下面代码:

//x这是个闭包函数,结束后会被销毁,但是因为他返回了另一个函数,这个函数调用并返回了局部变量s,所以s不能被摧毁了,必须被保留下来!

//x这是个闭包函数,结束后会被销毁,但是因为他返回了另一个函数,这个函数调用并返回了局部变量s,所以s不能被摧毁了,必须被保留下来!

function x(){

    var s=[1,2,3];              //一样的局部变量s

    return function(t){

        s.push(t);      //一样往s中添加数字

        return s;

    };

}

var y=x();      //闭包赋值给y变量

y(4);

y(5);

alert(y(6));

浏览器显示:1,2,3,4,5,6。

结论:function x()事实上是制作了一个只属于代码块环境的闭包,闭包中的s变量是不会因为这个x执行完成后被销毁,也不会因为返回的函数执行完后被销毁,即使这段代码全部执行完,s仍然保留在内存中,作用域链也仍然存在,知道程序结束(关闭浏览器)!所以注意:滥用闭包会导致内存不足的!

为了更好的说明,销毁与不销毁的问题,我推荐下面这段代码

//全局对象y,当中的变量:程序结束前永远不会销毁

//函数中的局部对象在函数结束后也会像变量一样被销毁的

var y={

    s:[1,2,3],          //对象中的变量

    //对象中的方法(类似于函数)

add:function(t){

        this.s.push(t);

        return this.s;

    }

}

y.add(4);

y.add(5);

alert(y.s);

浏览器显示:1,2,3,4,5,6。

结论:用对象和闭包达到同样的效果,因为对象除非指定销毁,不然会存留在当前程序内存中!

使用闭包有一个优点,也是它的缺点,就是可以把局部变量驻留在内存中,可以避免使用全局变量。全局变量在每个模块都可调用,这势必将是灾难性的。

时间: 2024-10-04 20:23:38

《JavaScript权威指南》学习——js闭包的相关文章

JavaScript权威指南学习笔记之一

1.关于分号 javascript里面不强制使用分号来表示一行语句的结束,但是最好能够在写js之前,特别是在原有的js上面新增时,最好前置一个分号.避免这种情况发生:  2.JavaScript类型转换 3.关于=== ①如果类型不同则不等 ②null===null或undefined===undefined ③true===true或false===false ④NaN不等 ⑤0===0 0===-0 ⑥如果是同一个object,array,function则相等 4.关于== ①如果已经==

javascript权威指南学习笔记1

打开这本书,进入到javascript的世界.以前都是看各种视频,感觉什么收获也没有,反而弄得脑袋混乱,希望能够按照这本书的节奏掌握javascript这门语言,为我的前端学习打下基础. 学习前准备:web浏览器(F12用来唤醒和关闭firebug界面,ctrl+shift+j用来唤醒错误工作台,console.log()调试辅助) 本书分为4个部分:Javascript语言核心:客户端Javascript:Javascript核心参考:客户端Javascript参考.今天主要学了第一部分.主要

javascript权威指南学习笔记2

Javascript语言核心(2~12章) 第三章:类型.值.变量 1.数字: overflow(Infinity, -Infinity).underflow(+0,-0) 非数字值:它和任何值都不相等,包括自身.if(x!=x) return NAN:==>isNaN()判断是不是NaN或者字符串等 javascript的精度要注意,即(0.3-0.2)!=(0.2-0.1) Date()构造函数:月份从0开始计数,天数从1开始计数,星期天是0: 2.文本: 转义字符(牢记斜杠后面几个特殊的值

javascript 权威指南学习笔记

//通过id查找多个元素 function getElements(/*ids...*/){ var elements = {}: for(var i=0; i<arguments.length; i++){ var id = arguments[i]; var elt =document.getElementById("id"); if(elt == null) throw new Error("No element with id :" +id); ele

《Javascript权威指南》学习笔记之十一:处理字符串---String类和正则表达式

一.正则表达式的基本语法 1.概念:正则表达式由普通字符和特殊字符(元字符)组成的文本模式,该模式描述在查找字符串主体时待匹配的一个或者多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配. 普通字符包括所有的大小写字母字符.所有数字.所有标点符号及一些特殊符号.普通字符本身可以组成一个正则表达式,也可以和元字符组合组成一个正则表达式:而元字符则具有特殊的含义,包括().[].{}./.^.$.*.+.?...|.-.?:.?=.?! 2.基本语法 3.优先权含义 二.使用

《Javascript权威指南》学习笔记之十八:BOM新成就(1)--客户端存储数据(Web SQL DataBase实现)

使用本地存储和会话存储可以实现简单的对象持久化,可以对简单的键值对或对象进行存储.但是,对于比较复杂的关系数据进行处理时,就要用Web SQL Database.浏览器对Web SQL Database的支持情况如图: 一.如何使用Web SQL Database <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

《Javascript权威指南》学习笔记之十三:处理日期和时间

一.创建Date实例 1.Date类的方法和属性很多不是静态的,因此,在应用Date类的属性和方法之前,必须创建Date类的实例. var date = new Date();  //以当前日期和时间创建实例. var date = new Date(value);  //value是必选项,如果是数值,value表示指定日期与1970.1.1午夜之间的毫秒数:如果是字符串,value则按照parse()方法中的规则进行解析.全局的Date()函数完成与new Date(value)相同的功能

《Javascript权威指南》学习笔记之十四:JavaScript内建类

前面的几篇博文分别介绍了对象.字符串.数组.日期等内建类,本篇将介绍Boolean/Math/Function/Arguments类 一.使用Boolean类处理逻辑值 Boolean类是JS的一个封装类,可以用于获取Boolean对象的原始数据类型或者字符串表示形式.new Boolean(value)用于创建一个Boolean对象,Boolean(value)它的参数转换成一个原始的布尔值,并且返回这个值.Boolean对象只有两个值:true或者false. value参数可以省略.如果省

javascript权威指南第6版学习笔记

javascript权威指南第6版学习笔记 javascript数组.函数是特殊对象 看一点少一点. 3.1.4 hello.js内容是 var x=.3-.2;var y=.2-.1 console.log(x==y);console.log(x==.1);console.log(y==.1); 控制台输出结果: 3.1.5 var now = new Date();console.log(now); 3.2 文本 Javascript没有字符型,只有字符串. 16位怎么理解 3.10 变量作