如何在JS Proxy中拦截接收自定义函数参数的sort方法

实现逻辑说明 #

get 陷阱仅在读取 proxy.sort 属性时触发，此时并未执行 sort 方法，无法在 get 中捕获调用时传入的参数。所有调用 sort 方法时传入的参数，都会直接传递给 get 陷阱返回的自定义拦截函数，直接在拦截函数的参数位接收即可。

可运行验证代码 #

你现有代码的参数接收逻辑已经正确，补充参数处理逻辑即可正常使用：

// 拦截函数的参数位直接接收调用时传入的自定义排序函数
function sort(customSort) {
  console.log("Intercepted sort")
  // 此处可对捕获到的customSort做任意自定义处理
  console.log("已捕获自定义排序函数", customSort)
  // 调用原数组原生sort方法，传入排序函数
  return this.sort(customSort);
}
function get( target, prop, receiver ) {
  if (prop === 'sort') {
    // 仅绑定原数组为执行上下文，无需额外处理参数
    return sort.bind(target);
  }
  console.log("Intercepted get")
  return Reflect.get( target, prop, receiver );
}
var handler = {
  get
};
var proxy = new Proxy( [7,1,2,3,4,5], handler );

// 测试调用：传入倒序排序逻辑
console.log(proxy.sort((a,b) => b-a))

运行后会依次输出拦截日志、捕获到的自定义排序函数、排序后的数组[7,5,4,3,2,1]。

兼容多参数场景 #

如果需要适配sort方法的所有调用场景，可以用剩余参数语法接收所有传入参数：

function sort(...args) {
  console.log("捕获到sort调用的所有参数", args)
  return this.sort(...args);
}

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