深入理解javascript之闭包

理解闭包

闭包是静态语言不具有的一个特性,闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。闭包就是函数的堆栈在函数返回后并不释放,可以理解为这些函数并不在栈上分配而是在堆上分配。

这里需要讲一下堆栈,堆与栈都是编程语言用来在RAM中存放数据的地方。栈的优势就是存取速度比堆要快,仅次于直接位于CPU中的寄存器,但缺点是,存在栈中的数据大小与生存期必须是确定的,缺乏灵活性。堆的优势是可以动态地分配内存大小,生存期也不必事先告诉编译器,垃圾收集器会自动地收走这些不再使用的数据,但是缺点是由于在运行时动态分配内存,所以存取速度较慢。

回归正题,在了解了javascript的作用域原理之后,我们知道想从外部获取局部变量在正常情况下是办不到的。我们可以通过闭包来实现。

首先,我们在函数的内部再定义一个函数:

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

这时函数f2可以获取函数f1所有的局部变量,但是反过来就不行。因为f2可以访问f1的局部变量,所有我们把f2当做返回值给返回,就可以在外部访问f1的局部变量了:

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

这就是闭包。

如果还不能理解,看看下面两个代码的区别就明白了:

 var name = "TheWindow";

  var object = {

    name : "My Object",

    getNameFunc :function(){

      return function(){

        return this.name;

      };

    }

  };

  alert(object.getNameFunc()());//TheWindow

var name= "The Window";

  var object = {

    name : "My Object",

    getNameFunc :function(){

      var that = this;

      return function(){

        return that.name;

      };

    }

  };

  alert(object.getNameFunc()());//MyObject

使用闭包

闭包可以读取到函数内部的变量,这的确是一个非常大的作用,但是我们还是要尽量避免使用闭包,这是为什么呢?我们在刚才介绍闭包的概念的时候说到了,闭包之后函数的堆栈不会释放,也就是说这些值始终保持在内存中。

示例:

 function f1(){

    var n=999;

    nAdd=function(){n+=1}

    function f2(){

      alert(n);

    }

    return f2;

  }

  var result=f1();

  result(); // 999

  nAdd();

  result(); // 1000

可以看到n一直存储在内存中,并没有在f1调用后被自动清除。

所以在使用闭包时需要注意,内存消耗的问题。解决办法是在退出函数之前,将不使用的局部变量全部删除。还有就是闭包可以在父函数的外部改变父函数内部变量的值,所以如果父函数是对象,把闭包当做公用方法,把内部变量当做私有属性时要注意。

时间: 2025-01-03 20:32:51

深入理解javascript之闭包的相关文章

深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> &

(转)深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

深入理解JavaScript的闭包特性如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head&g

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head> 4.  <meta charset="utf

【转】理解JavaScript之闭包

闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面写下我的学习笔记~ 闭包-无处不在 在前端编程中,使用闭包是非常常见的,我们经常有意无意,直接或间接用到了闭包.闭包可以使传递数据更加灵活(比如处理一些点击事件) 1 2 3 4 5 6 7 !function() {        var localData = "localData here";         do

理解Javascript的闭包

前言:还是一篇入门文章.Javascript中有几个非常重要的语言特性——对象.原型继承.闭包.其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性.本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包. 注:本文是入门文章,例子素材整理于网络,如果你是高手,欢迎针对文章提出技术性建议和意见.本文讨论的是Javascript,不想做语言对比,如果您对Javascript天生不适,请自行绕道. 什么是闭

【深入理解javascript】闭包

1.作用域 "javascript没有块级作用域".所谓"块",就是大括号"{}"中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时候,不要在"块"里面声明变量,要在代码的一开始就声明好了.以避免发生歧义.如: 在声明变量时,全局代码要在代码前端声明,函数中要在函数体一开始就声明好.除了这两个地方,其他地方都不要出现变量声明. javascript除了全局作用域之外,只有函数可以创建作用域. 作用域最大的

深入理解javascript闭包

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

深入理解JavaScript闭包(closure)

最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目. 一.什么是闭包? “官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话通俗的来说就是:JavaScript中所有的function都是一个

javascript中闭包的工作原理

一.什么是闭包? 官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述的太学术.其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包.不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”.看下面这段代码: 1 2 3 4 5 6 7 function a() { var i = 0; function b() { ale