Javascript - 如何将原始对象传递给回调函数

Question

我遇到的问题专门针对 D3.js，但我以前也遇到过类似的问题，最后总是使用 hack 来绕过它。

我有一个包含对象数组的类。有一个从 CSV 文件添加新对象的功能。使用 d3.csv。此函数采用一个文件名和一个带有一个参数(csv 文件的当前解析行)的回调函数。我想将每个解析的行附加到 this.objects，但是 this 不再在函数的范围内。

function MyClass(){
    this.objects = [];
    this.add_objects = function(filename){
        d3.csv(filename, function(data){
             //Callback fired for each parsed line in csv file

             //Now I want to push data to this.objects...

        }
    }
}

Answer 1

在 javascript 中一个常见的方法是在父作用域中使用一个闭包变量:

function MyClass(){
    var self = this;
    this.objects = [];
    this.add_objects = function(filename){
        d3.csv(filename, function(data){
             //Callback fired for each parsed line in csv file

             // you can access self here
             self.objects.push(xxx);
        });
    }
}

或者该变量可以更具体:

function MyClass(){
    this.objects = [];
    var objectArray = this.objects;
    this.add_objects = function(filename){
        d3.csv(filename, function(data){
             //Callback fired for each parsed line in csv file

             // you can access objectArray here
             objectArray.push(xxx);
        });
    }
}

或者，您可以使用 .bind()(如果您不需要支持像 IE8 这样的旧 IE)来创建一个包装器，它将强制设置 this 回电:

function MyClass(){
    this.objects = [];
    this.add_objects = function(filename){
        d3.csv(filename, function(data){
             //Callback fired for each parsed line in csv file
             this.objects.push(xxx);
        }.bind(this));
    }
}