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

【问题标题】：Javascript - How to pass original object to callback functionJavascript - 如何将原始对象传递给回调函数
【发布时间】：2014-10-02 02:45:00
【问题描述】：

我遇到的问题是 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...

        }
    }
}

【问题讨论】：

var self = this; 在 MyClass 的开头然后使用self.objects

标签： javascript csv d3.js functional-programming

【解决方案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));
    }
}

【讨论】：

【解决方案2】：

另一种方法（但更复杂）是使用bind：

function MyClass(){
    this.objects = [];
    function handler(data) {        
        // here this is your binded this.
    }
    this.add_objects = function(filename){
        d3.csv(filename, handler.bind(this));
    }
}

【讨论】：