Javascript闭包（Closure）详解

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

　　下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

　　一、变量的作用域

　　要理解闭包，首先必须理解Javascript特殊的变量作用域。

　　变量的作用域无非就是两种：全局变量和局部变量。

　　Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

　　?

1
2
3
4
5
6
7

var n=999;
 
function f1(){
　　alert(n);
}
 
f1(); // 999

　　另一方面，在函数外部自然无法读取函数内的局部变量。

　　?

1
2
3
4
5

function f1(){
　　var n=999;
}
 
alert(n); // error

　　这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量!

　　?

1
2
3
4
5
6
7

function f1(){
　　n=999;
}
 
f1();
 
alert(n); // 999

　　二、如何从外部读取局部变量?

　　出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

　　那就是在函数的内部，再定义一个函数。

　　?

1
2
3
4
5
6
7
8
9

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

　　在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope)，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

　　既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗!

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

　　三、闭包的概念

　　上一节代码中的f2函数，就是闭包。

　　各种专业文献上的"闭包"(closure)定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

　　由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

　　所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

　　四、闭包的用途

　　闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

　　怎么来理解这句话呢?请看下面的代码。

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

　　在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

　　为什么会这样呢?原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制(garbage collection)回收。

　　这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数(anonymous function)，而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

　　五、使用闭包的注意点

　　1)由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

　　2)闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象(object)使用，把闭包当作它的公用方法(Public Method)，把内部变量当作它的私有属性(private value)，这时一定要小心，不要随便改变父函数内部变量的值。

　　六、思考题

　　如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。

　　代码片段一

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var name = "The Window";
 
　　var object = {
　　　　name : "My Object",
 
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
 
　　　　}
 
　　};
 
　　alert(object.getNameFunc()());

　　代码片段二

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var name = "The Window";
 
　　var object = {
　　　　name : "My Object",
 
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
 
　　　　}
 
　　};
 
　　alert(object.getNameFunc()());　

　　以上所述就是本文的全部内容了，希望大家能够喜欢。

时间： 2024-08-17 14:20:59

Javascript闭包（Closure）详解的相关文章

JavaScript闭包实例详解_javascript技巧

一.充电 1.一切(引用类型)都是对象,对象是属性的集合. 2.函数是一种对象,但是函数却不像数组一样--你可以说数组是对象的一种,因为数组就像是对象的一个子集一样.但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑. function Fn() {this.name = '王福朋';this.year = 1988;} var fn1 = new Fn(); var obj = { a: 10, b: 20 };等价于var obj

JavaScript 闭包机制详解及实例代码_javascript技巧

首先要区分两个概念,一是匿名函数,一是闭包. 所谓匿名函数,就是创建函数没有给定函数名.经常出现的包括函数表达式,就是定义一个匿名函数,然后将函数赋值给某个变量,而此时这个变量就相当于该函数的函数名,例如: var sayHi = function(){ alert("Hi"); }; //注意这个分号 sayHi(); //调用函数 还有一种常用匿名函数的情况是回调函数,如 JQuery 中常用到的: $("p").click(function(){ alert(

JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)_javascript技巧

一.函数作用域 1.函数作用域 就是作用域在一个"Function"里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a, b, c ); // 三个全都失败 上面的"foo"函数内的几个标识符,放到函数外面访问就都会报错. 2.立即执行函数表达式 在任意代码片段外部

javascript闭包(Closure)用法实例简析_javascript技巧

本文实例讲述了javascript闭包(Closure)用法.分享给大家供大家参考,具体如下: closure被翻译成"闭包",感觉这东西被包装的太学术化.下面参考书本和网上资源简单探讨一下(理解不当之处务请留意). 1.什么是闭包 官方的回答:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 看了上面的定义,如果你不是高手,我坚信你会和我一样愤怒的质问:这tmd是人话吗? 要理解闭包,还是代码

Javascript字符串常用方法详解_javascript技巧

字符串 字符串就是一个或多个排列在一起的字符,放在单引号或双引号之中. 'abc' "abc" length属性 js里的字符串类似于数组,都是一个一个字符拼凑在一起组成的,因此可以用length属性取得字符串的长度 var str = "hello" str.length; // 5 字符串常用的一些方法 1. charAt() str.charAt(n) ＝> 返回字符串的第 n 个字符,如果不在 0~str.length-1之间,则返回一个空字符串. v

JavaScript严格模式详解_javascript技巧

如我们所知,JavaScript 是一门灵活的语言.其灵活性同样也带来了很多坑,当然也有一些是 设计缺陷 .比如 一个变量没有声明就赋值,默认是全局变量,如 (function () { a = 3; })(); console.log(window.a); // 输出3 对象有多个重名属性,最后赋值的那个属性会覆盖前面的值.如 var obj = { c: 3, c: 4 } // obj 为 {c:4} 还有什么 == , typeof 之类的坑,数不胜数.毕竟 JavaScript 之父设

Javascript复制实例详解_javascript技巧

在做项目时有一个需求,是需要复制内容到剪切板,因为有众多浏览器,所以要兼容性很重要. 1.最简单的copy,只能在IE下使用 使用clipboardData方法 <script type="text/javascript"> function copy(){ window.clipboardData.setData("text",document.getElementById("name").value); alert("T

JavaScript运算符实例详解

核心提示:JavaScript运算符实例详解 根据处理对象的数目: 单元运算符; 二元运算符; 三元运算符. 根据功能: 赋值运算符; = += -= *= /= %=(取余) 算术运算符; + - * / %(取余) ++(递增) --(递减) - 例1: 例2: <Script> var x = y = 3;  with (document) {      write("x = 3, y = 3 <br>");      write("若x = y

JavaScript操作Cookie详解

 这篇文章主要介绍了JavaScript操作Cookie详解,本文讲解了什么是Cookie.Cookie基础知识.Cookie常见问题.cookie 有两种清除方式.Cookie基础用法.Cookie高级用法等内容,需要的朋友可以参考下     什么是 Cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." - w3school cooki

JavaScript作用域示例详解_javascript技巧

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域