JavaScript 闭包详解

闭包的特性

闭包有三个特性:

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

闭包的定义及其优缺点

闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量

闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

闭包是javascript语言的一大特点,主要应用闭包场合主要是为了:设计私有的方法和变量。

一般函数执行完毕后,局部活动对象就被销毁,内存中仅仅保存全局作用域。但闭包的情况不同!

嵌套函数的闭包

function aaa() {
          var a = 1;
          return function(){
           alert(a++)
          };
        }
        var fun = aaa();
        fun();// 1 执行后 a++,,然后a还在~
        fun();// 2
        fun = null;//a被回收!!

闭包会使变量始终保存在内存中,如果不当使用会增大内存消耗。

javascript的垃圾回收原理

(1)、在javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收;
(2)、如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。

使用闭包的好处

那么使用闭包有什么好处呢?使用闭包的好处是:

1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在

一、全局变量的累加

<script>
var a = 1;
function abc(){
        a++;
        alert(a);
}
abc();              //2
abc();            //3
</script>

二、局部变量

<script>

function abc(){
        var a = 1;
        a++;
        alert(a);
}
abc();                       //2
abc();                    //2
</script>

那么怎么才能做到变量a既是局部变量又可以累加呢?

三、局部变量的累加

<script>
function outer(){
        var x=10;
        return function(){             //函数嵌套函数
                x++;
                alert(x);
        }
}
var y = outer();              //外部函数赋给变量y;
y();                 //y函数调用一次,结果为11,相当于outer()();
y();                //y函数调用第二次,结果为12,实现了累加
</script>

函数声明与函数表达式

在js中我们可以通过关键字function来声明一个函数:

<script>
function abc(){
        alert(123);
}
abc();
</script>

我们也可以通过一个”()”来将这个声明变成一个表达式:

<script>
(function (){
        alert(123);
})();                   //然后通过()直接调用前面的表达式即可,因此函数可以不必写名字;
</script>

四、模块化代码,减少全局变量的污染

<script>
var abc = (function(){      //abc为外部匿名函数的返回值
        var a = 1;
        return function(){
                a++;
                alert(a);
        }
})();
abc();    //2 ;调用一次abc函数,其实是调用里面内部函数的返回值
abc();    //3
</script>

五、私有成员的存在

<script>
var aaa = (function(){
        var a = 1;
        function bbb(){
                a++;
                alert(a);
        }
        function ccc(){
                a++;
                alert(a);
        }
        return {
                b:bbb,             //json结构
                c:ccc
        }
})();
aaa.b();     //2
aaa.c()      //3
</script>

六.使用匿名函数实现累加

//使用匿名函数实现局部变量驻留内存中,从而实现累加

<script type="text/javascript">

 function box(){
     var age = 100;
     return function(){          //匿名函数
          age++;
          return age;
     };

 }
var b = box();
alert(b());
alert(b());    //即alert(box()());
alert(b());
alert(b);            //     function () {
                        //   age++;
                       // return age;
                      //       }

b = null;  //解除引用,等待垃圾回收
</script>

过度使用闭包会导致性能的下降。函数里放匿名函数,则产生了闭包

七、在循环中直接找到对应元素的索引

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <title></title>
    <script>
    window.onload = function(){
            var aLi = document.getElementsByTagName(‘li‘);
            for (var i=0;i<aLi.length;i++){
                    aLi[i].onclick = function(){        //当点击时for循环已经结束
                    alert(i);
                    };
            }
    }
    </script>

    </head>
    <body>
            <ul>
                    <li>123</li>
                    <li>456</li>
                    <li>789</li>
                    <li>010</li>
            </ul>
    </body>
    </html>

八、使用闭包改写上面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <title></title>
    <script>
    window.onload = function(){
            var aLi = document.getElementsByTagName(‘li‘);
            for (var i=0;i<aLi.length;i++){
                    (function(i){
                            aLi[i].onclick = function(){
                                    alert(i);
                            };
                    })(i);
            }
            };
    </script>

    </head>
    <body>
            <ul>
                    <li>123</li>
                    <li>456</li>
                    <li>789</li>
            </ul>
    </body>
    </html>

九.内存泄露问题

由于IEjs对象和DOM对象使用不同的垃圾收集方法,因此闭包在IE中会导致内存泄露问题,也就是无法销毁驻留在内存中的元素

function closure(){
    var oDiv = document.getElementById(‘oDiv‘);//oDiv用完之后一直驻留在内存中
    oDiv.onclick = function () {
        alert(‘oDiv.innerHTML‘);//这里用oDiv导致内存泄露
    };
}
closure();
//最后应将oDiv解除引用来避免内存泄露
function closure(){
    var oDiv = document.getElementById(‘oDiv‘);
    var test = oDiv.innerHTML;
    oDiv.onclick = function () {
        alert(test);
    };
    oDiv = null;
}

阅读正文请点击此处

时间: 2024-11-05 06:21:01

JavaScript 闭包详解的相关文章

javascript闭包详解(内容为转载的,觉得不错就分享一下)

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

Javascript闭包详解

之前微博上有人提了个问题,到底什么是闭包? javascript秘密花园中有这么一段 闭包是 JavaScript 一个非常重要的特性,这意味着当前作用域总是能够访问外部作用域中的变量. 因为函数 是 JavaScript 中唯一拥有自身作用域的结构,因此闭包的创建依赖于函数. 维基闭包词条阐释了其本质 在计算机科学中,闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外.所

javascript运动详解

javascript运动详解 本文给大家详细介绍下如何使用javascript来实现运动效果,总结的十分全面,附上各种效果的详细示例和演示图,有需要的小伙伴可以参考下. 物体运动原理:通过改变物体的位置,而发生移动变化. 方法: 1.运动的物体使用绝对定位 2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动. 步骤: 1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,

javascript事件详解笔记

javascript事件详解笔记: 一.事件流 1.事件流: 描述的是页面中接受事件的顺序,有事件冒泡.事件捕获两种. 2.事件冒泡: 由最具体的元素接收,然后逐级向上传播到最不具体的元素的节点(文档). 3.事件捕获: 最不具体的节点先接收事件,而最具体的节点应该是最后接收事件. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title&

JavaScript prototype 详解(对prototype 使用的一些讲解)

对JavaScript有一定了解的你,对jquery不陌生吧,那你看jQuery源代码的时候对prototype 也一定有见过,如果对prototype有疑问或者想更深入的去了解与使用它,欢迎你继续往下阅读. 最初的用法是, 为了避免方法在构造器里随机数据被实例化时而产生重复的副本  后来被用在"继承"上面了, 注意, JS语义上是没有继承的, 这里说的是人为的实现.对于下面对JavaScript中类型名称叫做"对象"."函数"."类型

Javascript学习--------详解window窗口对象

对话框: 警告对话框:alert(): 语法:window.alert(src)或者alert(src); 询问回答对话框:confirm(): 语法:window.confrim(question)或者confrim(question); 单击确认,返回true: 单击取消,返回false 提示对话框:prompt(): 语法:window.prompt([showtxt],[defaultTxt])或者prompt([showtxt],[defaultTxt]); 单击确认,返回输入的文本:

JavaScript事件详解-zepto的事件实现

zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们可以看到,整个event模块,事件绑定核心就是on和off,还有一个trigger用来触发,类观察者模式,可以先看看汤姆大叔的深入理解JavaScript系列(32):设计模式之观察者模式,其余皆为实现的处理函数.首先来个demo: $("#btn").on("click&quo

javascript 函数详解2 -- arguments

今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascript 函数详解2 -- arguments Javascript 函数详解3 -- this对象 Javascript 函数详解4 -- 函数的其他属性 Javascript 函数详解5 -- 函数对象的内部函数 arguments对象参数数组引用 arguments是函数对象内部一个比较特殊的类数组

Swift 中的Closures(闭包)详解

Swift 中的Closures(闭包)详解 在Swift没有发布之前,所有人使用OC语言编写Cocoa上的程序,而其中经常被人们讨论的其中之一 -- Block 一直备受大家的喜爱.在Swift中,同样有这样的一个角色,用于当开发者需要异步执行的之后使用的一种语法 - Closure.中文翻译为闭包. 闭包出了可以进行异步执行之外,它的完整使用还依赖闭包本身的变量.常量的捕获.闭包捕获并存储对它们定义的上下文中的任何常量和变量的引用,这也就意味着,你可以在任何时候异步执行闭包的时候获取之前的所