带有回调的 Javascript 函数，将启动的对象作为参数传递答案

【问题标题】：Javascript function with a callback that passes the initiated object as a parameter带有回调的 Javascript 函数，将启动的对象作为参数传递
【发布时间】：2011-12-28 13:14:30
【问题描述】：

我正在尝试扩展一些现有功能，使其具有将原始对象作为参数传递的回调函数，或者至少是存储在较小对象中的任何公共变量，我该如何实现？

这是我正在使用的文件的简化版本，一个类将包含在一个变量中

<html>
<head>
</head>
<script>

var foo = new Foo ({
    arg1:1,
    onComplete: function(){
        alert("complete " + total);
    }
});

</script>
<body>
</body>
</html>

函数/类看起来类似这样

function Foo(options) {
    // private
    var number1_ = options.arg1;
    var number2_ = 10;
    var total_ = number1_ + number2_;

    // public
    this.total = total_;

    (function Foo() {
        if (options) {
            if (options.onComplete && typeof (options.onComplete) === "function") {

                // how do I pass Foo or an object of selected variables here?
                options.onComplete();
            }
        }
    })();
}

谢谢

【问题讨论】：

标签： javascript function callback

【解决方案1】：

看看这个:)

function Foo(options) {
    // private
    var number1_ = options.arg1,
        number2_ = 10,
        total_ = number1_ + number2_;
    // public
    this.total = total_;

    (function Magazine( that ) {

        (options.onComplete || function(){}).call( that );

    })(this);
}

var foo = new Foo({
    arg1: 1,
    onComplete: function() {

        alert("complete " + this.total);
    }
});

现场演示： http://jsfiddle.net/P3bzM/

【讨论】：

超级，我认为它会传递这个（或在'this'演示的情况下，'that'）但我不熟悉调用或应用功能。 ta
您也可以尝试不使用that。 (function Magazine( ) { (options.onComplete || function(){}).call( this ); }).call(this)

【解决方案2】：

(function Magazine() {
    if (options) {
        if (options.onComplete && typeof (options.onComplete) === "function") {

            // if you want `this === the foo instance` in the function:
            options.onComplete.call(this);
            // otherwise just pass it as an argument:
            options.onComplete(this);
        }
    }
}).call(this);

【讨论】：

这只是太臃肿。当不需要时，为什么所有这些功能一开始就很神奇？构造函数内部的(function ...).call(this) 看起来像if (false === ((i>=10) === true)) 之类的东西，而不是if (i<10) 对我来说。
如果回答他的问题只需要复制粘贴并稍作改动，我为什么要重写这个人的整个代码？
删除部分的第一行和最后一行是完全重写吗？
实际代码很可能包含更多行，但这只是一个缩短版本

【解决方案3】：

您有几种方法可以实现这一目标。

调用回调时只需添加参数：

if (options.onComplete && typeof (options.onComplete) === "function") {

    // how do I pass Foo or an object of selected variables here?
    options.onComplete(this.number1_, this.number2_, this.total_);
}

使用 .call() 或 .apply() javascript 方法来设置回调的上下文（回调中的 this 是什么）

if (options.onComplete && typeof (options.onComplete) === "function") {

    // how do I pass Foo or an object of selected variables here?
    options.onComplete.apply(this);
    // options.onComplete.call(this);
}

两种方法的工作方式相同，只是传递参数给方法的方式不同。阅读this以获取更多信息

【讨论】：

【解决方案4】：

<html>
<head>
</head>
<script>

var foo = new Foo ({
    arg1:1,
    onComplete: function(total){
        alert("complete " + total);
    }
});

</script>
<body>
</body>
</html>


function Foo(options) {
    // private
    var number1_ = options.arg1;
    var number2_ = 10;
    var total_ = number1_ + number2_;

    // public
    this.total = total_;

    (function Magazine() {
        if (options) {
            if (options.onComplete && typeof (options.onComplete) === "function") {

                // how do I pass Foo or an object of selected variables here?
                options.onComplete(total_);
            }
        }
    })();
}

查找单词“total”以查看更改。

【讨论】：

这不起作用，因为this 不再引用该实例。
已修复。顺便说一句，您为什么使用 Magazine 闭包进行封装？不需要它，只需将 if 语句放在那里，没有(function ...)() 开销（那么你可以使用this.total btw）。
感谢您，该文件似乎有点矫枉过正，我会尽可能简化它，杂志是我发布的问题的错字（应该是 Foo），但我不太了解整个文件，所以我不知道是否需要它。