javascript闭包的理解-韩烨

javascript闭包是javascript的难点,很多人对js闭包不是很理解,我对js闭包一开始也是云里雾里,我刚刚进兴安得力的时候,做的转正试题中就有一个对闭包理解的题目。如何理解javascript的闭包呢?下面我们一起来学习一下:

闭包的含义和理解

通俗地讲,JavaScript 中每个的函数都是一个闭包,但通常意义上嵌套的函数更能够体现出闭包的特性,请看下面这个例子:

var   generateClosure   =   function()   {
    var   count   =   0;
    var   get   =   function()   {
    count   ++;
    return   count;
         };
    return   get;
};
var   counter   =   generateClosure();
console.log(counter());   //   输出   1
console.log(counter());   //   输出   2
console.log(counter());   //   输出   3

这段代码中,generateClosure() 函数中有一个局部变量count,初值为 0。还有一个叫做 get 的函数,get 将其父作用域,也就是 generateClosure() 函数中的 count变量增加 1,并返回 count 的值。generateClosure() 的返回值是 get 函数。在外部我们通过 counter变量调用了 generateClosure() 函数并获取了它的返回值,也就是 get 函数,接下来反复调用几次 counter(),我们发现每次返回的值都递增了1。

让我们看看上面的例子有什么特点,按照通常命令式编程思维的理解,count 是generateClosure 函数内部的变量,它的生命周期就是 generateClosure 被调用的时期,当 generateClosure 从调用栈中返回时,count 变量申请的空间也就被释放。问题是,generateClosure() 调用结束后,counter() 却引用了“已经释放了的” count变量,而且非但没有出错,反而每次调用 counter() 时还修改并返回了 count。这是怎么回事呢?

这正是所谓闭包的特性。当一个函数返回它内部定义的一个函数时,就产生了一个闭包,闭包不但包括被返回的函数,还包括这个函数的定义环境。上面例子中,当函数generateClosure() 的内部函数 get 被一个外部变量 counter 引用时,counter 和generateClosure()的局部变量就是一个闭包。如果还不够清晰,下面这个例子可以帮助你理解:

var   generateClosure   =   function()   {
    var   count   =   0;
    var   get   =   function()   {
        count   ++;
        return   count;
    };
    return   get;
};

var   counter1   =   generateClosure();
var   counter2   =   generateClosure();
console.log(counter1());   //   输出   1
console.log(counter2());   //   输出   1
console.log(counter1());   //   输出   2
console.log(counter1());   //   输出   3
console.log(counter2());   //   输出   2

上面这个例子解释了闭包是如何产生的: counter1和counter2分别调用了generate-Closure() 函数,生成了两个闭包的实例,它们内部引用的 count 变量分别属于各自的运行环境。我们可以理解为,在 generateClosure() 返回 get 函数时,私下将 get 可能引用到的 generateClosure() 函数的内部变量(也就是 count 变量)也返回了,并在内存中生成了一个副本,之后 generateClosure() 返回的函数的两个实例 counter1和 counter2 就是相互独立的了。

闭包的用途

1. 嵌套的回调函数

闭包有两个主要用途,一是实现嵌套的回调函数,二是隐藏对象的细节。让我们先看下面这段代码示例,了解嵌套的回调函数。如下代码是在 Node.js 中使用 MongoDB 实现一个简单的增加用户的功能(可以说每一个nodejs的高手,通常也是js的高手):

exports.add_user   =   function(user_info,   callback)   {
    var   uid   =   parseInt(user_info[‘uid‘]);
    mongodb.open(function(err,   db)   {
        if   (err)   {callback(err);   return;}
        db.collection(‘users‘,   function(err,   collection)   {
            if   (err)   {callback(err);   return;}
            collection.ensureIndex("uid",   function(err)   {
                if   (err)   {callback(err);   return;}
                collection.ensureIndex("username",   function(err)   {
                    if   (err)   {callback(err);   return;}
                    collection.findOne({uid:   uid},   function(err)   {
                        if   (err)   {callback(err);   return;}
                        if   (doc)   {
                            callback(‘occupied‘);
                        }   else   {
                            var   user   =   {
                                uid:   uid,
                                user:   user_info,
                            };
                            collection.insert(user,   function(err)   {
                                callback(err);
                                           })
                                     }
                            })
                        })
                   })
              })
        })
}

如果你对 Node.js 或 MongoDB 不熟悉,没关系,不需要去理解细节,只要看清楚大概的逻辑即可。这段代码中用到了闭包的层层嵌套,每一层的嵌套都是一个回调函数。回调函数不会立即执行,而是等待相应请求处理完后由请求的函数回调。我们可以看到,在嵌套的每一层中都有对 callback 的引用,而且最里层还用到了外层定义的 uid 变量。由于闭包机制的存在,即使外层函数已经执行完毕,其作用域内申请的变量也不会释放,因为里层的函数还有可能引用到这些变量,这样就完美地实现了嵌套的异步回调。

2. 实现私有成员

我们知道,JavaScript 的对象没有私有属性,也就是说对象的每一个属性都是曝露给外部的。这样可能会有安全隐患,譬如对象的使用者直接修改了某个属性,导致对象内部数据的一致性受到破坏等。JavaScript通过约定在所有私有属性前加上下划线(例如_myPrivateProp),表示这个属性是私有的,外部对象不应该直接读写它。但这只是个非正式的约定,假设对象的使用者不这么做,有没有更严格的机制呢?答案是有的,通过闭包可以实现。让我们再看看前面那个例子:

var   generateClosure   =   function()   {
        var   count   =   0;
        var   get   =   function()   {
            count   ++;
            return   count;
        };
        return   get;
    };

    var   counter   =   generateClosure();
    console.log(counter());   //   输出   1
    console.log(counter());   //   输出   2
    console.log(counter());   //   输出   3

我们可以看到,只有调用 counter() 才能访问到闭包内的 count 变量,并按照规则对其增加1,除此之外决无可能用其他方式找到 count 变量。受到这个简单例子的启发,我们可以把一个对象用闭包封装起来,只返回一个“访问器”的对象,即可实现对细节隐藏

时间: 2024-10-12 03:37:54

javascript闭包的理解-韩烨的相关文章

javascript 闭包的理解

看过很多谈如何理解闭包的方法,但大多数文章,都是照抄或者解释<Javascript高级程序设计(第三版)>对于闭包的讲解,甚至例程都不约而同的引用高程三181页‘闭包与变量’一节的那个“返回数组各个项,结果各个项的值都相同”的例程,还有些文章的讲解过程上一步与下一步之间的跨度简直就是一步登天,让人反复看半天都无法理解. 闭包的理解需要很多概念做铺垫,包括变量作用域链.执行环境.变量活动对象.引用式垃圾内存收集机制等,如果对本文涉及的这些概念不理解,可以去找本<Javascript高级程序

我对JavaScript闭包的理解

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

javascript闭包的理解和实例

所谓闭包,值得是词法表示包括不必要计算的变量的函数,也就是说,该函数可以使用函数外定义的变量. 顺便提示一下: 词法作用域:变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域. with和eval除外,所以只能说JS的作用域机制非常接近词法作用域(Lexical scope). 下面是一个简单的使用全局变量的闭包实例: 1 var sWord="Hello,Welcome to web前端开发工程师的博客,请多多指教.&

javascript闭包的理解

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

关于Javascript闭包的理解

以下内容属个人理解,如有看不明白或漏洞之处,纯属水平不佳,还望见谅. 关于闭包,高程里的定义是:指有权访问另一个函数作用域中的变量的函数.创建闭包最常见的方法就是在一个函数的内部再创建一个函数. 这里先创建一个函数f function f(v1, v2) { // 函数表达式 } 并进行调用 let result = f(5, 10) 为了搞懂闭包,首先要明白上面程序整个过程中发生了什么: 1.当调用f()函数的时候,后台创建了一个f()的执行环境与相应的作用域链(这里的作用域链的来源:在创建f

Javascript闭包简单理解

提到闭包,想必大家都早有耳闻,下面说下我的简单理解.说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和组件或多或少用到了闭包.所以,了解闭包是非常必要的.呵呵... 一.什么是闭包简而言之,就是能够读取其他函数内部变量的函数.由于JS变量作用域的特性,外部不能访问内部变量,内部可以外部变量. 二.使用场景1. 实现私有成员.2. 保护命名空间,避免污染全局变量.3. 缓存变量. 先看一个封装的例子: var person = function () { // 变量作用域为函

javascript 闭包的理解(二)

// 定义一个User构造函数 function User(properties){ //遍历对象属性,确保它作用域正确 for(var i in properties){ (function(which){ var p = i; //为属性创建获取器 which["get"+i] = function(){ return properties[p]; }; //为属性创建设置器 which["set"+i] = function(val){ properties[

深入理解javascript闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

全面理解Javascript闭包和闭包的几种写法及用途

一.什么是闭包和闭包的几种写法和用法                                                       1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态. 2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 简单的说,Javascript允许使用内部函数---即函数定义和函数表