为含默认参数的函数新增参数及自定义cellRenderer传参问题咨询

给带默认参数的函数加新参数，核心原则是不要破坏原有代码的调用逻辑，最稳妥的做法是把新参数放在参数列表的末尾，并给它设置默认值。举个实际例子：

假设你原来的函数是这样的：

function getFinalPrice(originalPrice, taxRate = 0.07) {
  return originalPrice * (1 + taxRate);
}

现在要新增一个discount参数来计算折扣后的价格，直接把它放在最后并设默认值即可：

// 新增参数放在末尾，设置默认值为0（无折扣）
function getFinalPrice(originalPrice, taxRate = 0.07, discount = 0) {
  return originalPrice * (1 + taxRate) * (1 - discount);
}

这样原来的调用方式（比如getFinalPrice(100)或getFinalPrice(100, 0.1)）都能正常工作，不会因为新增参数而报错。

如果因为某些原因必须把新参数放在前面，那一定要给前面的所有参数都设置默认值，但这种方式容易让原有调用逻辑混乱，除非特别必要不推荐：

// 不推荐：新增参数在前面，需给所有前置参数设默认值
function getFinalPrice(discount = 0, originalPrice, taxRate = 0.07) {
  return originalPrice * (1 + taxRate) * (1 - discount);
}
// 注意：原来的getFinalPrice(100)现在会把100当成discount，导致originalPrice为undefined
// 必须改成getFinalPrice(0, 100)才能正常调用，破坏了原有代码

先解决第一个疑问：params参数的来源 #

从你的代码结构来看，这应该是类似AG Grid这类表格组件的列配置。这类组件在渲染单元格的时候，会自动创建一个包含单元格相关信息的params对象，并把它传给cellRenderer函数——你不需要手动调用这个函数，组件内部会在合适的时机自动调用并传入参数。

这个params对象里通常包含这些内容：

• params.data：当前行的数据源
• params.value：当前单元格的对应值
• params.column：当前列的配置信息
• 其他组件特定的属性（比如AG Grid里还有api、context等）

然后解决自定义参数传递的问题 #

你直接写cellRenderer: ACellRenderer(myParam)不行，是因为这样会立即执行ACellRenderer函数，把函数的返回值（这里你的函数没写return，所以是undefined）赋值给cellRenderer，而不是把函数本身传给组件。组件拿到undefined自然无法渲染单元格。

这里有两种常用的解决方法：

方法1：用组件自带的参数配置（推荐，如果组件支持的话）

像AG Grid这类成熟的表格组件，都提供了cellRendererParams配置项，可以直接把自定义参数传进去：

{ 
  headerName: "A", 
  valueGetter: 'data.a', 
  field: 'a', 
  cellRenderer: ACellRenderer, 
  width: 100, 
  filter: 'number',
  // 新增这行：把自定义参数放在cellRendererParams里
  cellRendererParams: { myCustomParam: '你的自定义值' }
}

然后在ACellRenderer里直接从params对象中取出这个参数即可：

function ACellRenderer(params){
    // 直接拿到自定义参数
    const myParam = params.myCustomParam;
    if(params.data && params.data.a){
        // 在这里使用myParam做你需要的操作
        console.log('自定义参数：', myParam);
        // Do something
    }
}

方法2：用高阶函数（闭包）实现

如果你的表格组件不支持cellRendererParams，可以用高阶函数来封装，把自定义参数通过闭包传递进去：

// 先写一个高阶函数，接收自定义参数，返回真正的cellRenderer函数
function createACellRenderer(myCustomParam) {
  return function(params) {
    // 这里可以访问外部的myCustomParam
    if(params.data && params.data.a){
        console.log('自定义参数：', myCustomParam);
        // Do something
    }
  }
}

然后在列配置里调用这个高阶函数，传入你的自定义参数：

{ 
  headerName: "A", 
  valueGetter: 'data.a', 
  field: 'a', 
  // 调用高阶函数，返回带自定义参数的renderer函数
  cellRenderer: createACellRenderer('你的自定义值'), 
  width: 100, 
  filter: 'number'
}

这样组件拿到的是高阶函数返回的真正的cellRenderer函数，当组件调用它时，函数内部可以通过闭包访问到你传入的自定义参数。

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates