L--js闭包

简介

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

闭包的特性

闭包有三个特性:

  1.函数嵌套函数

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

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

闭包的定义及优缺点

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

使用闭包的一个优点,也是他的缺点,就是可以把局部变量驻留在内存中,可以避免使用全局变量。

全局变量在每个模块都可调用,这势必将是灾难性的的。(所以推荐使用私有的,封装的局部变量。)

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

嵌套函数的闭包

function test () {
    var a = 1;
    return function() {
        alert(a++);
    };
}
var fun = test();
fun(); //1执行后 a++,然后a还在,还有指向a的引用
fun(); //2
fun = null; //指向a的引用消失,a被js垃圾机制回收

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

javascript的垃圾回收原理

1.在javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收;

2.如果两个对象互相引用,而不再被第三者引用,那么这两个互相引用的对象也会被回收(IE的垃圾回收机制稍有不同)。

使用闭包的好处

  1.希望一个变量长期驻扎在内存中

  2.避免全局变量的污染

  3.私有成员的存在

一.全局变量的累加

<script type="text/javascript">
    var a = 1;
    function test() {
        a++;
        alert(a);
    }
    test(); //2
    test(); //3
</script>

二.局部变量

<script type="text/javascript">
    function test() {
        var a = 1;
        a++;
        alert(a);
    }
    test(); //2
    test(); //2
</script>//Question:那么怎么才能做到变量a即是局部变量有可以累加呢?

三.局部变量的累加

<script type="text/javascript">
    var x = 10;
    function outer() {
        return function() {
            x++;
            alert(x);
        }
    }
    var y = outer(); //外部函数赋给变量y
    y();             //y函数第一次调用,结果为11
    y();             //y函数第二次调用,结果为12
</script>

函数声明与函数表达式

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

<script type="text/javascript">
    function test() {
        alert("ok");
    }
    test();
</script>

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

<script type="text/javascript">
    (function () {
        alert("ok");
    })();  //自执行函数,不必写函数名
</script>

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

<script type="text/javascript">
    var test = (function() {
        var a = 1;
        return function() {
            a++;
            alert(a);
        }
    })();
    test(); //2
    test(); //3
</script>

五.私有成员的存在

<script type="text/javascript">
    var test = (function() {
        var a = 1;
        function test1 () {
            a++;
            alert(a);
        }
        function test2 () {
            a++;
            alert(a);
        }
        return {               //json结构
            b: test1,
            c: test2
        }
    })()
    test.b(); //2
    test.c(); //3
</script>

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

<script type="text/javascript">
    function test() {
        var age = 100;
        return function () {
            age++;
            return age;
        }
    }
    var b = test();
    alert(b());
    alert(b());
    alert(b());
    alert(b);  /*function () {
                    age++;
                    return age;
               }*/

    b = null; //解除引用,等待GC回收
</script>//过度使用闭包会导致性能下降。函数里放匿名函数,则产生了闭包
时间: 2024-10-16 02:59:43

L--js闭包的相关文章

js闭包浅了解

js闭包浅理解 要理解闭包,得先知道js的变量作用域,在js中,有两种变量作用域: 全局作用域 局部作用域 一.在函数内可以访问全局变量 比如,下面的例子: <!--lang:js--> <script> var n = 100; function f1(){ console.log(n); } f1()//返回100 </script> 上面的例子很简单,下面是另一种情况. 二.在函数外无法读取函数内的局部变量 还是一个小例子: <!--lang:js-->

js闭包的作用

js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文 我们来看看闭包的用途.事实上,通过使用闭包,我们可以做很多事情.比如模拟面向对象的代码风格:更优雅,更简洁的表达出代码:在某些方面提升代码的执行效率. 1 匿名自执行函数 我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,比如:别的函数可能误用

浅谈JS闭包中的循环绑定处理程序

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件. (PS:之前也在<jQuery基础教程>第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来.) 大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的,谢谢! 先贴上错误的例子让大家

关于JS闭包,作者不详(转)

说明:本文由两篇文章结合而成,系从他人笔记中转过来的, 具体作者不详.因为觉得不错,遂共享之.如有侵权,立删致歉. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 fun

js闭包(closure),个人理解

一.闭包概念理解 各种专业文献上对js"闭包"(closure)定义非常抽象,贼难看懂.我的理解是,闭包就是能够读取某函数内部变量的函数.由于在Javascript语言中只有在函数内部的函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数".所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 二.用途 闭包可以用在很多地方.但它最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中. 三.使

理解js闭包原理

各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂.我的理解是,闭包就是能够读取其他函数内部变量的函数. 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数". 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中. 怎么来理解这句话呢?请看下面的

js 闭包让函数只执行一次

js 闭包让函数只执行一次 <script>function once(f) {    var run;    return function() {        if (!run) {            run = true;            f.apply(this, arguments);        }    }}var g = once(function(x) {    alert(x)});g(1);g(2);g(3); </script> js 闭包让函

js闭包之我见

很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: 1 function test(){ 2 for(var i=0;i<5;i++){ 3 window.onclick=function(){ 4 alert(i); 5 } 6 } 7 } 8 test() 原意是点击第一下弹出i的值0,点击第二下弹出i的值1,一直到第五次点击弹出4.想象是美好的,现实却不按常规出牌,无论点击多少次,alert出来的值都是5.后来接触了js闭包,才知道原来是它搞的鬼.看了不少相关书籍和博客后,

大部分人都会做错的经典JS闭包面试题

大部分人都会做错的经典JS闭包面试题 目录 由工作中演变而来的面试题 JS中有几种函数 创建函数的几种方式 三个fun函数的关系是什么? 函数作用域链的问题 到底在调用哪个函数? 后话 由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,

js闭包演示

有个网友问了个问题,如下的html,为什么每次输出都是5 <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <style type="text/css"> </style> <script type=