JS参数函数内部变量未定义问题及解决尝试

嘿，我来帮你把这个问题掰扯清楚～咱们先从你遇到的问题根源说起：

为什么原来的代码会输出undefined？ #

先看你最初的代码：

function A(type = 'default_type', B = function(){}) { B(); }
function Parent() {
  var data = "hello"
  A('my_type', data => { console.log(data); });
}
Parent();

这里的核心问题是：你在Parent里传给A的箭头函数data => { console.log(data); }，它的参数data是等待外部传入的值，但函数A调用B()的时候，根本没给它传任何参数！所以这个data自然就变成undefined了。

简单说就是：你给箭头函数留了“接值的位置”，但没人给它递值，它当然拿不到东西啦😅

调整后的代码为什么能正常运行？ #

你修改后的代码其实精准命中了问题点，咱们拆解下：

function A(type = 'default_type', data, B = function(){}) { B(data); }
function Parent() {
  var data = "hello"
  A('my_type', data, data => { console.log(data); });
}
Parent();

这里做了两个关键改动：

1. 给函数A新增了data参数，专门用来接收你要传递的变量
2. 调用回调函数B的时候，把data作为参数传进去B(data)

这样一来，Parent里的data值就顺着A的参数传递到了箭头函数里，箭头函数拿到正确的"hello"，自然就能正常输出了。

额外的灵活写法（可选） #

如果不想固定参数顺序，也可以用对象来传递参数，这样后续扩展参数会更方便：

function A(options = { 
  type: 'default_type', 
  data: null, 
  callback: () => {} 
}) {
  options.callback(options.data);
}
function Parent() {
  var data = "hello"
  A({
    type: 'my_type',
    data: data,
    callback: (val) => { console.log(val); }
  });
}
Parent();

这种方式不用纠结参数顺序，可读性也更强～

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