IE11中JavaScript搜索函数无法运行：箭头函数语法错误排查求助

嘿，我懂你遇到的糟心事了！首先IE11确实不支持箭头函数（=>），你换成普通函数的思路是对的，但问题出在普通函数的this绑定规则和箭头函数完全不一样，导致搜索逻辑直接失效了。

问题根源 #

箭头函数的this是继承自外层函数的上下文（也就是search函数里的this，也就是你的query参数），但普通函数的this是动态绑定的：在every的回调函数里，默认情况下this会指向全局对象（IE11里就是window），根本不是你期望的query对象。所以this[key]找不到你要比对的属性值，自然搜索功能就出问题了。

修复方案 #

这里有两种简单直接的方法解决this绑定的问题：

方案1：用bind绑定回调的this

把回调函数的this强制绑定到外层search函数的this上，这样回调里的this就会精准指向query：

function search(user) {
  return Object.keys(this).every(function (key) {
    return user[key] === this[key];
  }.bind(this)); // 绑定this到外层的query对象
}

方案2：用闭包保存外层的this

这是ES5时代常用的写法，把外层的this存到一个变量里（比如that或者self），然后在回调里使用这个变量代替this：

function search(user) {
  var that = this; // 保存当前的this（也就是query）到变量
  return Object.keys(this).every(function (key) {
    return user[key] === that[key]; // 使用that代替this
  });
}

额外说明 #

放心，IE11是支持Object.keys和Array.prototype.every的，这两个方法不用替换，只需要解决this的绑定问题就行。如果之后还有其他ES6语法的兼容性问题，也可以考虑用Babel把代码转译成ES5，这样能更省心地兼容旧浏览器。

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