如何重构代码使third()函数可输出a、b、c？（JS作用域问题）

嘿，咱们直接解决问题：原代码里third()在全局作用域，根本拿不到first()里的b和second()里的c——这俩都是各自函数的局部变量，作用域只限于自己的函数内部。

给你两种简洁的重构方式，按需选择：

方式一：利用闭包嵌套函数 #

把third()放到second()内部，借助闭包特性捕获外层变量：

var a = 1;
const first = () => {
  let b = 2;
  const second = () => {
    let c = 3;
    console.log(a, b); // 输出1, 2
    // 将third嵌套在second内部，直接访问外层作用域变量
    const third = () => {
      console.log(a, b, c);
    }
    third(); // 输出1, 2, 3
  }
  console.log(a); // 输出1
  second();
}
first();

方式二：通过参数传递变量 #

如果不想调整函数嵌套结构，直接把b和c作为参数传给third()：

var a = 1;
const first = () => {
  let b = 2;
  const second = () => {
    let c = 3;
    console.log(a, b); // 输出1, 2
    // 调用third时传入需要的变量
    third(b, c);
  }
  console.log(a); // 输出1
  second();
}
const third = (b, c) => {
  console.log(a, b, c);
}
first();

简单说下原理： #

• 方式一靠闭包：内部函数可以访问外层函数（甚至全局）的变量，哪怕外层函数执行完毕，这些变量依然能被内部函数调用。
• 方式二更直白：把需要的变量以参数形式传递给third()，相当于把变量值“递”给它，自然就能输出了。

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