如何访问或修改JavaScript函数内部定义的局部变量？

函数内定义的局部变量默认无法在外部（包括控制台）直接访问，这是JavaScript作用域隔离的固有机制，但是可以通过以下几种方式实现访问和修改：

方法1：在函数内部暴露操作接口 #

如果可以修改函数源码，最简单的方式是通过全局挂载或者返回闭包的方式开放变量的读写能力。

方案1-1：挂载到全局对象 #

function whatever () {
  var x = 10
  // 将读写方法挂载到全局window对象，控制台可直接调用
  window.getX = () => x
  window.setX = (newVal) => x = newVal
}

只要先执行一次whatever()，之后控制台就可以直接调用getX()获取变量值，调用setX(20)修改变量值。

方案1-2：返回闭包实例 #

function whatever () {
  var x = 10
  // 返回包含读写方法的对象，形成闭包保留x的引用
  return {
    getX: () => x,
    setX: (newVal) => x = newVal
  }
}
// 执行函数拿到实例对象
const ins = whatever()

控制台通过ins.getX()、ins.setX(20)即可操作变量x。

方法2：通过浏览器断点调试操作（无需修改源码） #

如果无法修改网站源码，可以用浏览器开发者工具的断点功能操作：

• 按F12打开开发者工具，在「来源」面板找到whatever函数的定义位置，在var x = 10代码行之后打上断点
• 触发whatever函数执行，代码运行到断点位置时会暂停，此时控制台的执行上下文自动切换到当前函数的作用域，直接输入x即可查看值，输入x = 自定义值即可修改当前的x值

注意：函数执行完成后，如果没有闭包引用变量x，x会被垃圾回收，之后就无法再访问。

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