JavaScript脚本在浏览器正常运行但Node.js中失效问题求助

你碰到的这个问题其实是JavaScript中this绑定的经典坑——同样的代码在浏览器和Node.js中表现不同，核心原因是函数作为回调被调用时，this的指向发生了变化。

为什么会出现undefined？ #

当你把parseParameter.parser.filterBy传给data.filter()时，这个函数会被filter方法单独调用：

• 在浏览器环境中，这种独立调用的函数默认会把this绑定到全局对象window；而你的代码里用了var声明变量，在浏览器顶层作用域下，实例的属性可能意外挂载到了window上，所以还能正常访问。
• 但在Node.js中，顶层作用域的this是module.exports，不是全局对象，所以filterBy里的this指向module.exports，自然找不到parameter和filter这两个实例属性，结果就是undefined。

几种可行的解决方案 #

方案1：用箭头函数固定this指向

箭头函数的this是词法作用域，会继承定义它时的上下文（也就是IntegerParser的实例），修改IntegerParser的定义：

var IntegerParser = function(filter){
    this.parameter = '';
    this.filter = filter;
    this.parse = function(parameter){ this.parameter = parseInt(parameter); }
    // 改成箭头函数，this会绑定到当前实例
    this.filterBy = (item) => item[this.filter] === this.parameter;
}

方案2：调用filter时手动绑定this

在传递回调函数时，用bind把this强制绑定到integerParser实例：

// 把filterBy的this绑定到parseParameter.parser实例
var dataFiltered = data.filter(parseParameter.parser.filterBy.bind(parseParameter.parser));

方案3：在构造函数中提前绑定this

在IntegerParser的构造函数里，提前把filterBy的this绑定到当前实例：

var IntegerParser = function(filter){
    this.parameter = '';
    this.filter = filter;
    this.parse = function(parameter){ this.parameter = parseInt(parameter); }
    // 提前绑定this到当前实例
    this.filterBy = this.filterBy.bind(this);
}

// 原来的filterBy函数定义保留
IntegerParser.prototype.filterBy = function(item){
    return item[this.filter] === this.parameter;
}

验证修改效果 #

不管用哪种方案，修改后运行代码，console.log(dataFiltered)都会输出正确的过滤结果：

[ { stars: 2 } ]

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