当前位置：首页 > news >正文

JavaScript作用域与闭包

news 来源：原创 2025/5/10 21:42:14

一作用域

在JavaScript中，作用域（Scope）指的是变量和函数的可访问性范围。在JavaScript中，作用域有全局作用域和局部作用域之分。

全局作用域（Global Scope）：全局作用域指的是在代码中任何位置都可以访问的变量和函数。在浏览器环境中，全局作用域通常是指window对象。在全局作用域中声明的变量和函数可以被任何代码访问。
```
let globalVar = 'I am a global variable';

function globalFunction() {
  console.log('I am a global function');
}

console.log(globalVar); // 输出 'I am a global variable'
globalFunction(); // 输出 'I am a global function'
 
```
局部作用域（Local Scope）：局部作用域指的是在函数内部声明的变量和函数，只能在函数内部访问。每个函数都会创建一个新的局部作用域，函数内部的变量和函数只能在该函数内部访问。
```
function localFunction() {
  let localVar = 'I am a local variable';

  console.log(localVar); // 在函数内部可以访问
}

localFunction();
console.log(localVar); // 报错，localVar在函数外部不可访问
 
```
作用域链（Scope Chain）：当代码在嵌套作用域中执行时，JavaScript会按照作用域链的顺序查找变量。如果一个变量在当前作用域中找不到，JavaScript会沿着作用域链一级一级地向上查找，直到找到该变量或者到达全局作用域。
```
let outerVar = 'I am from outer scope';

function outerFunction() {
  let innerVar = 'I am from inner scope';

  function innerFunction() {
    console.log(outerVar); // 可以访问外部函数的变量
    console.log(innerVar); // 可以访问内部函数的变量
  }

  innerFunction();
}

outerFunction();
 
```
作用域在JavaScript中起着非常重要的作用，它决定了变量和函数的可访问性，帮助我们避免命名冲突和提高代码的可维护性。在理解作用域的基础上，可以更好地编写和理解JavaScript代码。

二闭包

闭包是指在一个函数内部可以访问其外部作用域的局部变量的函数。

由于在 JavasSript 中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包的优点包括：

可以访问外部函数的局部变量，提高了代码灵活性和可复用性。
可以实现封装和隐藏数据，保护数据不被外部访问和修改。
可以延长变量的生命周期，使得变量在外部函数执行完后仍然可以被访问。
可以实现回调和事件处理等功能。

闭包的缺点包括：

可能会导致内存泄漏，因为闭包中引用了外部函数的变量，导致这些变量无法被垃圾回收。
闭包的层级嵌套过多可能会增加程序的复杂度，降低代码的可读性和可维护性。
闭包对性能有一定影响，因为每次调用闭包都需要创建一个新的执行环境。
有可能因为闭包中对外部变量的引用导致意料之外的结果，需要特别注意作用域和闭包的关系。

闭包在编程中有许多实际的用途，以下是一些常见的用途和案例：

封装私有变量和方法：利用闭包可以创建私有变量和方法，实现信息隐藏和封装，例如模拟类的私有属性和方法。

function createCounter() {
  let count = 0;
  
  return {
    increment: function() {
      count++;
    },
    getCount: function() {
      return count;
    }
  };
}

let counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 输出1

保存状态：在函数执行完毕后，闭包可以保存函数内部的状态，使得变量的值在函数外部仍然可访问和修改。

function createTimer() {
  let seconds = 0;

  function incrementTimer() {
    seconds++;
    console.log(`Timer: ${seconds} seconds`);
  }

  return incrementTimer;
}

let timer = createTimer();
timer(); // 输出 Timer: 1 seconds
timer(); // 输出 Timer: 2 seconds

回调函数：在事件处理、异步编程等场景中常用闭包来实现回调函数，保持函数内部对外部变量的引用。

function fetchData(url, callback) {
  fetch(url).then(response => response.json()).then(data => {
    callback(data);
  });
}

function processData(data) {
  console.log(data);
}

fetchData('https://api.example.com/data', processData);

模块模式：利用闭包实现模块化开发，将相关的变量和方法封装在闭包内部，提供对外的接口，以防止全局污染。

let module = (function() {
  let privateVar = 10;

  function privateFunction() {
    return privateVar;
  }

  return {
    publicVar: 20,
    publicFunction: function() {
      return privateFunction() + this.publicVar;
    }
  };
})();

console.log(module.publicFunction()); // 输出 30