javascript - 失去对方法内对象的引用

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 8 年前。

我创建了一个简单的问题示例

函数计数应该计算我从查询返回的项目数。然而，当我从路由调用时，我当前实现它的方式会丢失对我的函数的引用。在这种情况下，函数 doWork 来自另一个我无法修改的 Node 模块。

有什么办法可以解决这个问题

function Counter(){
    this.array = createArray();
};


Counter.prototype.count = function (q){

query(q, function(data){
    if(data ===  "tabe")
    {
            this.array[0].total++;
    }
    else
    if(data === "chair")
    {
            this.array[1].total++;
    }
    else
    if(data === "lamp")
    {
            this.array[2].total++;

    }
    });
};

createArray = function (){

    var array = [];     

    array.push({item : "table",
                        total: 0});
    array.push({item : "chair",
                        total: 0});
    array.push({item : "lamp",
                        total: 0});    
    return array;

};

//The query function is actually in another node module that I cannot edit
query = function( data, callback){
    callback(data);
}    

module.exports = Counter;

index.js 文件

 /* Process query */    
router.get('/submit', function(req, res, next) {

    var counter = new Counter();

    counter.count("table");
    counter.count("table");
    counter.count("lamp");    


    for(var i = 0; i  < counter.array.length; i++){
        console.log(counter.array[i]);
    }

    res.end();
});

Answer 1

因为回调方法的执行上下文不是引用Counter实例，所以可以使用Function.bind()将自定义上下文传递给回调方法。

Counter.prototype.count = function (q) {
    query(q, function (data) {
        if (data === "tabe") {
            this.array[0].total++;
        } else if (data === "chair") {
            this.array[1].total++;
        } else if (data === "lamp") {
            this.array[2].total++;

        }
    }.bind(this));
};

另一种选择是使用闭包变量

Counter.prototype.count = function (q) {
    var self = this;
    query(q, function (data) {
        if (data === "tabe") {
            self.array[0].total++;
        } else if (data === "chair") {
            self.array[1].total++;
        } else if (data === "lamp") {
            self.array[2].total++;

        }
    });
};