JavaScript闭包赋值给变量复用报非函数错误的解决方法

报错核心原因 #

出现Uncaught TypeError: firstAttemp is not a function错误的根源是外层函数的返回值写错了：

• 原代码最后一行写的是return adding(n)，这行代码会立即执行adding函数，返回数值类型的计算结果，而不是返回adding函数本身
• 变量firstAttemp接收到的是数字，自然无法作为函数被调用传参

除此之外原代码还有两处逻辑问题会导致计算结果不符合预期：

• 闭包内的存储变量storage初始值设为0，第一次传入的参数没有被正确作为累加初始值
• 内部函数adding的参数名和外层变量重名，容易引发作用域混淆

正确实现代码 #

按照题目要求，实现逻辑只需要遵循两个核心规则：

1. 外层函数接收初始值，存入闭包作用域的持久化变量中
2. 外层函数最终直接返回内部定义的累加函数（不要加括号调用），保证返回值是可被调用的函数类型

function myFunction(initNum) {
  // 闭包持久化存储的值，初始化为第一次传入的参数
  let storage = initNum;
  // 内部累加函数，每次调用时将新传入值和存储值相加
  function add(newNum) {
    storage += newNum;
    return storage;
  }
  // 直接返回函数本身，而非函数执行结果
  return add;
}

// 符合题目预期的调用效果
const firstValue = myFunction(3);
const secondValue = firstValue(4);
console.log(secondValue); // 输出7

额外说明 #

每次调用外层的myFunction都会生成一个独立的闭包作用域，不同返回函数的存储值互不干扰，比如：

const counter1 = myFunction(1);
console.log(counter1(2)); // 3
console.log(counter1(3)); // 6

const counter2 = myFunction(10);
console.log(counter2(5)); // 15，和counter1的计算结果完全独立

内容的提问来源于stack exchange，提问作者Armando Endzelis