如何在同名变量的嵌套子函数中访问父函数的变量？

嘿，你遇到的其实是**变量遮蔽（Variable Shadowing）**的问题——你的child函数里声明了和parent函数同名的total变量，它会“挡住”作用域链上层的那个total，所以你在child里直接写total时，JS引擎会优先取当前作用域里的30，不会往上找父函数的20。这和闭包本身没关系，闭包已经在生效了，只是被同名变量遮蔽了~

下面给你几个可行的解决方案：

方案1：最简单的方式——避免变量遮蔽 #

如果可以的话，直接把子函数里的变量名改掉，比如改成childTotal，这样直接写total就能访问父函数的变量了：

function parent() {
  var total = 20;
  function child() {
    var childTotal = 30;
    console.log(childTotal); // 输出: 30
    console.log(total); // 输出: 20
  }
  child(); // 别忘了调用child才会执行内部代码哦
}
parent();

方案2：用对象容器保存父级变量 #

如果必须保留子函数里的total变量名，你可以在父函数里把要访问的变量放到一个对象里，通过对象属性来访问就不会被遮蔽了：

function parent() {
  var parentScope = { total: 20 };
  function child() {
    var total = 30;
    console.log(total); // 输出: 30
    console.log(parentScope.total); // 输出: 20
  }
  child();
}
parent();

方案3：提前缓存父级变量到闭包中 #

在定义child函数之前，把父函数的total赋值给一个不会被遮蔽的变量，比如parentTotal，之后在child里直接访问这个缓存变量就行：

function parent() {
  var total = 20;
  var parentTotal = total; // 提前缓存父级的total
  function child() {
    var total = 30;
    console.log(total); // 输出: 30
    console.log(parentTotal); // 输出: 20
  }
  child();
}
parent();

方案4：利用this绑定（需调整调用方式） #

把父函数的total挂载到自身的this上，然后用一个变量缓存这个this，避免子函数里的this指向变化：

function parent() {
  this.total = 20;
  var that = this; // 缓存父函数的this
  function child() {
    var total = 30;
    console.log(total); // 输出: 30
    console.log(that.total); // 输出: 20
  }
  child();
}
// 注意要通过new调用，避免污染全局作用域
new parent();

简单总结一下：闭包的作用是让内部函数能访问外部函数的变量，但如果内部函数有同名变量，就会触发变量遮蔽，覆盖掉上层的变量。解决思路要么是避免同名，要么是用其他方式（对象、缓存变量）绕开遮蔽~

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