JavaScript 闭包原理与实战解析

作者:纸飞机

时间:2026-10-22

浏览:252

本文深入解析JavaScript中的闭包概念,通过代码示例说明函数如何访问其定义时的词法作用域。文章探讨了闭包的常见形式,包括内部函数直接调用、返回值传递及全局变量引用,并指出闭包在保持状态和模块化开发中的核心价值,同时提醒注意可能引发的内存占用问题。

文章目录

闭包的基本概念

闭包

从字面含义理解,闭包意为“关闭一个包裹”。若将函数的作用域视为一个包裹,该术语形象地描述了其工作机制。通常,函数执行完毕后,其作用域会被自动销毁;然而,当内部函数引用了外部函数的变量时,外部函数的作用域便不会被销毁,从而形成闭包,相当于将父级作用域“封闭”保存。

例如:


function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  // 此处产生闭包 
  b();
} 
a();

闭包的常见形式与示例

当函数能够记住并访问其所在的作用域链时,即产生了闭包。尽管并非所有闭包都如此直观,因为内部函数的调用往往发生在外部函数之外,例如:


function a() {
  var name = "xuxu";
  function b() {
    console.log(name);
  }
  return b;
} 
var c=a();
// 此处产生闭包 此处的c函数其实就是a函数
c();

上述代码展示了闭包的一个主要优势:在全局作用域(如 window)中访问局部作用域(函数 a)内的值。依据常规词法作用域规则这是不可能的,但借助闭包即可实现。此外,我们还应关注日常开发中常见的另一种写法:


function foo() {
  var a = 2;
  function baz() {
     // 2
    console.log( a ); 
  }
  bar( baz );
}
function bar(fn) {
// 大家快看呀,这就是闭包!
  fn(); 
}

或者采用以下形式:


var fn;
function foo() {
  var a = 2;
  function baz() {
    console.log( a );
  }
  // 将baz分配给全局变量
  fn = baz; 
}
function bar() {
   // 大家快看呀,这就是闭包!
  fn();
}
foo();
// 2
bar(); 

闭包的执行机制与特性

上述情况同样构成闭包。只要函数内部调用了内部函数,或通过任何手段将内部函数传递至其定义时的词法作用域之外,该函数便会持有对原始作用域的引用。无论该函数在何处执行,它都会使用闭包机制。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章