JavaScript能否实现类似React传递访问props的函数传参方式？

你最开始编写的对象参数解构写法，本身就已经是最接近React props传参效果的实现方向，只要补全细节、调整调用方式就能完全达到需求。

普通位置参数不符合需求的原因 #

普通位置参数是按传入顺序匹配赋值的，你测试代码里写的fun(name = 'name1')本质是先执行赋值表达式返回值，再把值按顺序传入函数对应位置，根本不是按属性名匹配，所以会出现顺序错乱问题，也不支持传入超出定义数量的参数。

正确实现代码 #

// 完全模拟React props传参逻辑
const fun = ({ 
  name = 'defaultName', 
  subjects = 'defaultSubjects', 
  university = 'defaultUniversity',
  ...restProps // 收集所有额外传入的属性
} = {}) => { // 空对象默认值，防止不传参数时解构报错
  console.log('name : ', name)
  console.log('subjects : ', subjects)
  console.log('university : ', university)
  // 额外参数可以正常处理，不会报错
  if (Object.keys(restProps).length) {
    console.log('其他传入参数：', restProps)
  }
}

正确调用方式 #

所有参数需要包裹在同一个对象中传入，和React给组件传props的逻辑完全一致：

console.clear()
// 不传参数，全部走默认值
fun()
console.log('******************************')

// 只传name
fun({ name: 'name1' })
console.log('******************************')

// 不需要管参数顺序
fun({ university: 'university2', name: 'name2' })
console.log('******************************')

// 任意顺序传多个参数
fun({ university: 'university3', subjects: 'subject3', name: 'name3' })
console.log('******************************')

// 传入额外的location等参数也不会报错
fun({ university: 'university4', location: 'location4', subjects: 'subject4', name: 'name4' })

核心逻辑说明 #

React函数组件本质就是普通JavaScript函数，你写在组件标签上的所有属性，都会被React收集为一个对象传入组件的第一个参数（也就是props），和上面实现的函数逻辑完全一致：

• 没有参数顺序限制，按属性名匹配
• 可以传任意数量的额外参数，不会触发报错
• 可以灵活给每个属性设置独立的默认值

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