JavaScript ES6中map传递额外参数问题

嘿，这个问题我太熟了！核心原因其实是ES6箭头函数的this绑定规则和普通函数不一样，咱们一步步拆解：

为什么ES6写法不行？ #

你给map方法传的第二个参数{ role: 'teacher' }，本来是用来绑定回调函数的this的，但箭头函数convertEvent根本不绑定自己的this——它的this是直接继承自定义时的外层作用域，完全无视map传的这个thisArg参数。所以你在箭头函数里打印this.role自然拿不到值。

而旧版普通函数的写法能正常工作，是因为普通函数作为map的回调时，map的第二个参数会被自动绑定到该函数的this上，所以能正确获取到role。

几种可行的解决方案 #

方案1：把回调改成普通函数

如果你的逻辑允许，直接把convertEvent改成普通函数，这样map的第二个参数就能正常绑定到它的this上：

const convertEvents = action.payload.map(convertEvent, { role: 'teacher' });

function convertEvent(item) {
    console.log('----------convertEvent role----------');
    console.log(this.role); // 现在能输出'teacher'啦
    return item;
}

方案2：用闭包直接传递参数（保留箭头函数）

如果非要用箭头函数，咱们可以换个思路，不用依赖this，而是通过闭包直接把参数传给convertEvent：

const convertEvents = action.payload.map(item => convertEvent(item, 'teacher'));

const convertEvent = (item, role) => {
    console.log('----------convertEvent role----------');
    console.log(role); // 直接拿到传入的'teacher'
    return item;
};

方案3：用bind手动绑定this（适合普通函数）

也可以用bind方法手动把目标对象绑定到普通函数的this上，效果和map的第二个参数一致：

const convertEvents = action.payload.map(convertEvent.bind({ role: 'teacher' }));

function convertEvent(item) {
    console.log('----------convertEvent role----------');
    console.log(this.role); // 同样能输出'teacher'
    return item;
}

总结 #

箭头函数虽然简洁，但它的this继承特性在这种场景下反而会成为“坑”。根据你的代码风格和需求选上面的任意一种方案都能解决问题～

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