如何从对象构造函数执行回调

How can I perform a callback from object constructor?

本文关键字：执行 回调 构造函数 对象      更新时间：2023-09-26

我有一个看起来像这样的对象：

    var users = function(url){
        this.users = []
        console.time("api");
        d3.json(url, function(data){
            console.timeEnd("api");
            this.users = data.data
        })
    }

它是这样设置的：

    var liveUsers = new users(apiPoint)

d3.json是一个异步的API调用。我希望在回调完成后执行回调，最好是追回，我该怎么做？

您所需要的只是实现一个回调系统。这里有一个简单的方法：

var users = function(url){
    var self = this;
    this.users = []
    console.time("api");
    d3.json(url, function(data){
        console.timeEnd("api");
        self.users = data.data
        self.cb && self.cb();
    })
    this.complete = function (fn) {
        this.cb = fn;
    };
}
var liveUsers = new users(apiEndpoint).complete(function (){
    console.log(this.users);
});

对我来说仍然有点过于复杂，为什么需要它来链接？ 为什么users需要成为构造函数？ 为什么users甚至存在而不是简单地使用 d3.json ，它已经具有您在问题中寻找的所有功能开箱即用？

通常，在函数后面抽象请求的目的是避免需要指定 api 端点，以便如果您需要更改端点，您可以在一个地方完成所有操作。在这种情况下，您必须在每个请求中指定它，使函数的名称有点...毫无意义，因为它可用于从任何端点请求。

如果你想链接，只需return this！

var users = function(url){
        this.users = []
        console.time("api");
        d3.json(url, function(data){
            console.timeEnd("api");
            this.users = data.data
        })
        return this;
    };
users.prototype.somethingElse = function(){
    console.log(this.users);
    return this;
};
var liveUsers = new users(apiPoint).somethingElse();

return this的使用使链保持运行，您可以通过添加prototype方法向类添加其他函数。使用该prototype功能保留this，但是如果您想使用与类无关的另一个函数并且仍然使用相同的this，那么您需要更棘手一点：

var users = function(url){
        this.users = []
        console.time("api");
        d3.json(url, function(data){
            console.timeEnd("api");
            this.users = data.data
        })
        return this;
    },
    somethingElse = function(){
        console.log(this.users);
        return this;
    };
var liveUsers = new users(apiPoint);
// bunch of other codey stuffs
somethingElse.call(liveUsers);

通过使用.call()应用 liveUsers 作为第一个参数，它会覆盖 somethingElse 函数最初具有的任何this，并为其提供您想要的上下文（使 this === liveUsers ）。

希望这有帮助！

相关文章：