JavaScript函数参数解构带默认值语法困惑及相关问题咨询

嘿，我来帮你理清楚这个语法的逻辑，其实它就是JavaScript里对象解构赋值和函数参数默认值的组合用法，拆解开来就很容易理解了：

1. 核心语法拆解 #

你看到的myFn参数里的{otherFn = () => {console.log('inside myFn declaration'); return 'true'}}，可以拆成两部分看：

• 对象解构：函数期望接收一个对象作为参数，{otherFn}的写法是直接从这个传入的对象中提取名为otherFn的属性，把它变成函数内部的局部变量。
• 默认值设置：otherFn = ...的意思是，如果传入的对象里没有otherFn这个属性，或者它的值是undefined，就用后面的箭头函数作为otherFn的默认值。

2. 为什么你觉得它"不像默认参数"？ #

你调用myFn({name:'some name', type: 'some type'})时，传入的对象里确实没有otherFn属性，所以触发了默认值逻辑——注意，箭头函数的声明本身不会执行内部代码，但你在myFn里调用了otherFn()，这才会打印inside myFn declaration并返回true。

如果我们传入带自定义otherFn的参数，比如：

myFn({
  name:'some name', 
  type: 'some type',
  otherFn: () => {console.log('我是自定义的otherFn'); return '自定义返回值'}
});

这时就会使用你传入的自定义函数，输出会变成：

我是自定义的otherFn
Inside myFn2 自定义返回值

这完全符合默认参数的表现，只是你之前的调用刚好触发了默认值而已。

3. 和你写的"易懂版本"的本质区别 #

你写的版本是在函数内部直接声明了otherFn变量，这意味着不管调用者传入什么，otherFn都是固定的那个箭头函数，完全无法外部自定义。

而原代码的写法是React组件开发中很常见的模式：它允许父组件（调用方）传入自定义的回调函数，同时子组件（myFn）保留了默认的处理逻辑，兼顾了灵活性和默认行为。

4. 关于你测试的错误代码解释 #

你写的function myFn({ name: 'some name', type: 'some type', otherFn: () => { console.log("other function"); return false; } }){...}之所以报错，是因为在解构语法里，:是用来重命名变量的，比如{ name: userName }是把传入对象的name属性赋值给局部变量userName，而不是设置默认值。设置默认值必须用=，这就是改成=后能运行的原因。

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