JavaScript如何多次调用同名函数且每次调用拥有独立参数？

你可以通过以下几种JS特性实现每次调用的参数/状态独立，互不干扰：

1. 闭包工厂函数 #

通过工厂函数返回携带独立闭包参数的执行函数，每次生成的函数自带专属参数，不会互相覆盖：

// 定义按钮生成工厂函数
function createButtonGenerator(btnText, onClick, style) {
  // 闭包存储当前实例的专属参数，仅当前返回的函数可访问
  const config = { btnText, onClick, style }
  // 返回实际执行的生成函数
  return function() {
    const btn = document.createElement('button')
    btn.innerText = config.btnText
    btn.addEventListener('click', config.onClick)
    Object.assign(btn.style, config.style)
    document.body.appendChild(btn)
  }
}

// 生成三个带独立参数的按钮生成函数
const genBtn1 = createButtonGenerator('按钮1', () => alert('我是按钮1'), {background: 'red'})
const genBtn2 = createButtonGenerator('按钮2', () => alert('我是按钮2'), {background: 'blue'})
const genBtn3 = createButtonGenerator('按钮3', () => alert('我是按钮3'), {background: 'green'})

// 各自调用，完全独立
genBtn1() // 该次调用使用自身专属参数
genBtn2() // 该次调用执行对应专属操作
genBtn3() // 该次调用使用自身专属参数

2. 直接传参调用（无状态需求首选） #

如果不需要提前存储参数仅单次执行，每次调用直接传入专属参数即可，参数仅在当前调用上下文生效：

function generateButton(config) {
  const btn = document.createElement('button')
  btn.innerText = config.btnText
  btn.addEventListener('click', config.onClick)
  Object.assign(btn.style, config.style)
  document.body.appendChild(btn)
}

// 每次调用传入专属参数，完全独立
generateButton({btnText: '按钮1', onClick: () => alert('1'), style: {background: 'red'}})
generateButton({btnText: '按钮2', onClick: () => alert('2'), style: {background: 'blue'}})
generateButton({btnText: '按钮3', onClick: () => alert('3'), style: {background: 'green'}})

3. 类实例实现（适合复杂按钮逻辑） #

如果按钮有后续修改、隐藏等操作需求，可以用类封装，每个实例自带独立属性：

class ButtonGenerator {
  constructor(config) {
    this.config = config
  }
  render() {
    const btn = document.createElement('button')
    btn.innerText = this.config.btnText
    btn.addEventListener('click', this.config.onClick)
    Object.assign(btn.style, this.config.style)
    document.body.appendChild(btn)
    this.btnElement = btn
  }
  updateText(newText) {
    this.btnElement.innerText = newText
  }
}

const btn1 = new ButtonGenerator({btnText: '按钮1', onClick: () => alert('1'), style: {background: 'red'}})
const btn2 = new ButtonGenerator({btnText: '按钮2', onClick: () => alert('2'), style: {background: 'blue'}})
btn1.render()
btn2.render()

核心实现逻辑是避免使用全局/外层作用域的共享变量存储参数，将参数的作用域限制在单次调用、闭包或者类实例内部，就可以实现多次调用互不干扰。

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