0

0

JavaScript 中的函数重定义与闭包缓存机制解析

碧海醫心

碧海醫心

发布时间:2026-02-10 20:17:36

|

458人浏览过

|

来源于php中文网

原创

JavaScript 中的函数重定义与闭包缓存机制解析

本文深入剖析 `fun1()` 与 `fun2()` 行为差异的本质:前者通过函数名重赋值实现单次初始化 + 闭包缓存,后者每次调用均创建全新数组;核心区别在于对象生命周期、作用域绑定及引用共享。

在 JavaScript 中,看似等价的函数写法可能因执行上下文和变量绑定方式的不同,产生截然不同的运行时行为。fun1() 与 fun2() 的对比正是理解函数重定义(function reassignment)闭包(closure)引用语义(reference semantics) 的经典案例。

? 行为差异的本质原因

关键不在“返回什么”,而在于何时创建数组以及该数组被谁持有

  • ✅ fun1():
    第一次调用时,const arr = [...] 创建一个数组,并立即通过 fun1 = function() { return arr; } 将全局/外层作用域中的 fun1 标识符重新绑定到一个新函数。该新函数形成闭包,永久捕获并持有首次创建的 arr 引用。后续所有 fun1() 调用都执行这个重定义后的函数,始终返回同一数组实例。

  • ❌ fun2():
    每次调用都独立执行 const arr = [...],创建全新的数组对象。函数返回的是该次调用中新建数组的引用,调用之间无任何共享或持久化。

因此,test_fun_1.pop() 修改的是同一个数组对象,而 test_fun_2.pop() 只影响当次返回的临时数组,下一次 fun2() 调用又生成一个原始的 ["a","b","c","d","e"]。

? 代码验证:观察引用一致性

function fun1() {
  const arr = ["a", "b", "c", "d", "e"];
  fun1 = () => arr; // 重定义:fun1 现在指向闭包函数
  return fun1();
}

function fun2() {
  return ["a", "b", "c", "d", "e"]; // 每次新建数组
}

console.log(fun1() === fun1()); // true —— 同一对象引用
console.log(fun2() === fun2()); // false —— 不同对象引用

⚠️ 注意事项与潜在陷阱

  • 作用域层级决定重定义效果
    fun1 = ... 赋值成功,是因为 fun1 在函数声明时被提升为函数作用域外的可写绑定(非严格模式下,函数声明在全局或函数作用域中默认可重赋值)。若在严格模式("use strict")中执行,此操作会抛出 TypeError(禁止对函数声明赋值)。

    立即学习Java免费学习笔记(深入)”;

    Hugging Chat
    Hugging Chat

    HuggingFace平台推出的免费开源的AI聊天工具

    下载
  • 不是“懒加载”,而是“单例初始化”
    这种模式常用于实现轻量级单例或初始化缓存(如配置对象、DOM 元素查询),但需注意:它不可逆,且首次调用承担初始化开销。

  • 避免误用:局部 let/const 不会触发相同行为
    若改为 let fun1 = ... 或 const fun1 = ... 声明,则内部重赋值仅作用于局部变量,不影响外部调用逻辑,行为将退化为 fun2():

    function fun3() {
      const arr = ["a", "b", "c", "d", "e"];
      let localFun = () => arr; // 局部变量,不影响外部 fun3
      return localFun();
    }
    // fun3() 每次返回新数组?❌ 错!仍返回同一 arr —— 但这是闭包,非重定义
    // 正确对比应为:不修改 fun3 标识符本身

✅ 推荐替代方案:显式缓存更安全、可维护

现代 JavaScript 更推荐使用模块级私有变量或 WeakMap 实现可控缓存:

// 方案1:模块级缓存(ES Module)
let _cachedArray = null;
export function fun1() {
  if (!_cachedArray) {
    _cachedArray = ["a", "b", "c", "d", "e"];
  }
  return _cachedArray;
}

// 方案2:IIFE 封装(CommonJS 或脚本环境)
const fun1 = (() => {
  let cached = null;
  return () => {
    if (cached === null) cached = ["a", "b", "c", "d", "e"];
    return cached;
  };
})();

这类写法语义清晰、支持严格模式、易于单元测试,且避免了对函数名的“魔法”重赋值。

? 总结

fun1() 的“魔法”并非语法特性,而是 JavaScript 执行模型的自然结果:函数声明提升 + 作用域链闭包 + 可变标识符绑定共同作用下的引用持久化。理解它,有助于你识别性能优化机会(如避免重复计算),也警示你谨慎使用隐式状态——尤其是在需要可预测性与可测试性的工程场景中。真正的技巧,不在于写出最短的代码,而在于让意图清晰、行为可预期。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

193

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

296

2024.02.23

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

265

2025.06.11

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

129

2025.08.07

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

541

2023.09.20

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

140

2025.07.29

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

490

2023.08.04

js函数function用法
js函数function用法

js函数function用法有:1、声明函数;2、调用函数;3、函数参数;4、函数返回值;5、匿名函数;6、函数作为参数;7、函数作用域;8、递归函数。本专题提供js函数function用法的相关文章内容,大家可以免费阅读。

165

2023.10.07

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

47

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号