重构JS基础知识 - 探秘作用域链和闭包世界

前端

2024-02-14 17:09:56

一、作用域与作用域链

JavaScript中存在全局作用域和函数作用域。

1. 全局作用域

JavaScript有一个全局对象，window，在全局声明的变量都属于window的属性。未使用声明符声明的变量也是window的属性。

2. 函数作用域

我们在定义函数的时候，函数内部的代码就属于函数作用域。函数作用域中的变量只在该函数内部有效，不能在函数外部访问。

3. 作用域链

作用域链是一系列作用域的集合，其中每个作用域都包含其内部的作用域。当我们访问一个变量时，JavaScript会沿着作用域链向上查找，直到找到该变量为止。

二、闭包

闭包是指能够访问其他函数内部变量的函数。闭包的本质是函数和词法作用域的结合。词法作用域是指函数定义时所在的词法环境。

闭包的优势在于它可以访问其他函数内部的变量，从而可以实现一些有趣的效果，比如：

创建私有变量
实现延迟执行
创建迭代器
实现模块化

三、如何利用作用域链和闭包

在实际开发中，我们可以利用作用域链和闭包来实现一些有用的功能，比如：

1. 创建私有变量

通过闭包，我们可以创建私有变量，从而防止其他代码访问这些变量。

function createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1

在这个例子中，count变量是私有变量，只能通过createCounter函数返回的函数访问。

2. 实现延迟执行

通过闭包，我们可以实现延迟执行，即在指定的时间后执行某个函数。

function delay(fn, ms) {
  return function() {
    setTimeout(fn, ms);
  };
}

const delayedFunction = delay(() => {
  console.log('Hello, world!');
}, 1000);

delayedFunction();

在这个例子中，delay函数返回了一个闭包，该闭包会在1秒后执行console.log函数。

3. 创建迭代器

通过闭包，我们可以创建迭代器，从而遍历数据结构。

function createIterator(data) {
  let index = 0;

  return {
    next() {
      if (index < data.length) {
        return { value: data[index++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
}

const data = [1, 2, 3, 4, 5];
const iterator = createIterator(data);

while (true) {
  const result = iterator.next();
  if (result.done) {
    break;
  }

  console.log(result.value);
}

在这个例子中，createIterator函数返回了一个闭包，该闭包实现了迭代器接口。我们可以通过调用next方法来遍历数据结构。

4. 实现模块化

通过闭包，我们可以实现模块化，从而将代码组织成更小的、独立的单元。

const module = (function() {
  const privateVariable = 10;

  function privateFunction() {
    console.log('This is a private function.');
  }

  return {
    publicVariable: 20,
    publicFunction: function() {
      console.log('This is a public function.');
    }
  };
})();

console.log(module.publicVariable); // 20
module.publicFunction(); // This is a public function.