欢迎来到我的博客！#

使用 Markdown 格式编写。

什么是闭包？#

闭包是指一个函数能够访问并记住其词法作用域中的变量，即使该函数在其词法作用域之外执行。

您代码中的闭包实例#

在useDog.ts中，getDog函数就是一个典型的闭包：

1
export default function (){
2
  // 外部作用域的变量
3
  let dogList = reactive([
4
    'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
5
  ])
6

7
  // 闭包函数 - 可以访问外部作用域的dogList
8
  async function getDog(){
9
    try {
10
      let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
11
      dogList.push(result.data.message) // 访问外部变量
12
    } catch (error) {
13
      alert(error)
14
    }
15
  }
16

17
  return {dogList, getDog} // 返回闭包函数
18
}

闭包的核心特性#

1. 词法作用域访问#

1
function outer() {
2
  let count = 0; // 外部变量
3

4
  function inner() {
5
    count++; // 内部函数可以访问外部变量
6
    console.log(count);
7
  }
8

9
  return inner;
10
}
11

12
const closure = outer();
13
closure(); // 1
14
closure(); // 2 - 闭包记住了count的值

2. 变量持久化#

1
function createCounter() {
2
  let count = 0;
3

4
  return function() {
5
    count++;
6
    return count;
7
  };
8
}
9

10
const counter1 = createCounter();
11
const counter2 = createCounter();
12

13
console.log(counter1()); // 1
14
console.log(counter1()); // 2
15
console.log(counter2()); // 1 - 每个闭包有自己的作用域

Vue 3组合式API中的闭包应用#

1. 自定义Hooks（如您的useDog）#

1
export function useCounter() {
2
  const count = ref(0);
3

4
  function increment() {
5
    count.value++; // 闭包访问count
6
  }
7

8
  function reset() {
9
    count.value = 0; // 闭包访问count
10
  }
11

12
  return { count, increment, reset };
13
}
14

15
// 组件中使用
16
const { count, increment } = useCounter();

2. 事件处理器的闭包#

1
<script setup>
2
const message = ref('Hello');
3

4
// 闭包：setTimeout回调函数可以访问message
5
function delayedAlert() {
6
  setTimeout(() => {
7
    alert(message.value); // 访问外部作用域的message
8
  }, 1000);
9
}
10
</script>

闭包的常见应用场景#

1. 数据封装#

1
function createPerson(name) {
2
  let age = 0; // 私有变量
3

4
  return {
5
    getName: () => name,
6
    getAge: () => age,
7
    setAge: (newAge) => age = newAge,
8
    celebrateBirthday: () => age++
9
  };
10
}
11

12
const person = createPerson('张三');
13
person.setAge(25);
14
person.celebrateBirthday(); // age变为26

2. 防抖函数#

1
function debounce(fn, delay) {
2
  let timer = null; // 闭包保存timer
3

4
  return function(...args) {
5
    clearTimeout(timer);
6
    timer = setTimeout(() => fn.apply(this, args), delay);
7
  };
8
}
9

10
const debouncedSearch = debounce(search, 300);

3. 模块模式#

1
const myModule = (function() {
2
  let privateVar = 0;
3

4
  function privateMethod() {
5
    return privateVar;
6
  }
7

8
  return {
9
    publicMethod: function() {
10
      return privateMethod();
11
    }
12
  };
13
})();

闭包的内存管理#

优点：#

数据封装：创建私有变量
状态保持：函数调用间保持状态
模块化：实现模块模式

注意事项：#

内存泄漏：闭包会阻止垃圾回收器回收外部变量
性能考虑：过度使用闭包可能影响性能

在Vue中的最佳实践#

1
<script setup>
2
// 好的实践：使用响应式ref
3
const count = ref(0);
4

5
function increment() {
6
  count.value++; // 闭包访问响应式数据
7
}
8

9
// 避免的实践：直接在闭包中修改DOM
10
function badPractice() {
11
  setTimeout(() => {
12
    // 避免：直接操作DOM，应该使用响应式数据
13
    document.getElementById('counter').textContent = count.value;
14
  }, 1000);
15
}
16
</script>

总结#

闭包是JavaScript中非常重要的概念，它让函数能够：

记住其创建时的词法环境
访问外部作用域的变量
保持状态在多次调用之间

在Vue 3的组合式API中，闭包被广泛应用于自定义Hooks、事件处理等场景，是实现组件逻辑复用的关键技术。

您提供的useDog.ts就是一个完美的闭包应用实例！

Lovely firefly!

From Undreamt Night, I Thence Shine

函数闭包