JavaScript 闭包

本文详细解析JavaScript中闭包的概念、作用域、存储变量、注意点等关键内容,包括如何利用闭包获取内部变量、存储变量以及避免性能问题的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

闭包:Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created.
1:变量的作用域
要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域:全局变量和局部变量。
例如:
var n=999;
 function f1(){
  alert(n);
 }
 f1(); // 999

在这个例子中,n是全局变量,在f1()进行访问时获取的值就是全局的999.
但是,对于函数内部声明的局部变量,在函数外部无法访问,这个和其他语言类似:
function f1(){
    var n=999;
  }
  alert(n); // error
  

2:改进
既然在函数内部声明的变量在外部无法获取,那么如何变通一下才能获取到呢?
首先,在函数内部在定义一个函数:

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

 此时,我们会发现,f2可以访问到f1中声明的n值,主要是根据链式作用域,当在当前函数中,找不到变量时,会向上寻找直至undefined.
 既然f2()可以获取f1()的内部变量,那么我们就把f2()返回回来,通过f2来获取变量

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

 这样,我们就获取到了f1的内部变量。
  3:闭包来了
  上面提到的f2函数,就是闭包。闭包的定义千姿百态,总结一下就是可以读取其他函数内部变量的函数
  获取内部变量:闭包首先就像前面说道的可以获取函数的局部变量
  存储变量:在一般的函数中,当函数执行完成之后,函数内部的变量随之也就被销毁了,但是闭包可以把涉及到的变量存储下来,例如:

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

  由于f2是一个闭包,他保存了n的值,所以在调用了加一函数之后,n的值变成了1000,保证了n没有被销毁。
  4:注意点
  1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
  2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

放几个例子:

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

此时返回的依旧是Mozilla

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2));  // 7
console.log(add10(2)); // 12

下面这个是看到典型的闭包问题:

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?
//问:三行a,b,c的输出分别是什么?

涉及到函数的声明方式问题以及闭包和函数作用链域的问题,详情看:大部分人都会做错的经典JS闭包面试题

答案:

//答案:
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值