JavaScript按名称调用对象方法[重复]答案

【问题标题】：JavaScript call object method by its name [duplicate]JavaScript按名称调用对象方法[重复]
【发布时间】：2012-06-25 12:43:02
【问题描述】：

可能重复：
javascript object, access variable property name?

当某些事件发生时，我试图通过对象的名称调用对象的方法 - 这是我的代码：

var imageObject = {
    sendImage : function(obj) {
        "use strict";
        var thisId = obj.attr('id');
        var thisSubmit = obj.attr('data-submit');
        var thisCallback = obj.attr('data-callback');
        var thisUrl = $('#' + obj.attr('data-url')).text();
        new AjaxUpload(thisId, {
            action: thisUrl,
            name: 'thisfile',
            onSubmit: imageObject.thisSubmit,
            onComplete: imageObject.thisCallback
        });
    }
}

我也想将参数传递给提交和回调方法。

目前什么都没有发生，我确定我说的不对 - 谁能解释一下如何实现这一点？

我还使用以下提交和完成：

onSubmit: function(file, extension) {
    imageObject.thisSubmit(file, extension);
},
onComplete: function(file, response) {
    imageObject.thisCallback(file, response);
}

但我得到的是错误提示：

imageObject.thisSubmit is not a function

属性仅存储对象内方法的名称（字符串） - 例如“uploadImage”。

【问题讨论】：

data-submit的值是函数还是字符串？
@Alnitak .attr 返回一个没有任何处理的字符串：P
@Esailija 是的，我读的是.data()，它可以返回任何东西。
请不要再发送任何近距离投票 - 这个问题存在细微差别，因此不会重复！

标签： javascript object methods

【解决方案1】：

TJ 的答案几乎就在那里，除了（根据您问题中的新代码）您需要将参数从 onSubmit 复制到 thisSubmit，或使用 .apply() 为您复制它们。

下面的代码使用后一种方法，避免了一遍又一遍地重复函数签名：

new AjaxUpload(thisId, {
    action: thisUrl,
    name: 'thisfile',
    onSubmit: function() {
        imageObject[thisSubmit].apply(imageObject, arguments);
    },
    onComplete: function() {
        imageObject[thisCallback].apply(imageObject, arguments);
    }
});

【讨论】：

我所做的只是这样：onSubmit: function(file, extension) { imageObject[thisSubmit](file, extension); }, onComplete: function(file, response) { imageObject[thisCallback](file, response); }
@SpencerMark 是的，这行得通，但我的意思是必须复制函数签名。 .apply() 方法使新代码与函数签名完全无关——它根本不会出现在代码中。
@Alnitak - +1，很好地解决了问题的实际问题！
@SpencerMark - 我认为这应该是公认的答案。如果你接受这个而不是我的，我会删除我的帖子。
@JamesAllardice 相信我，这并不容易！ ;-) 不过，无需删除您的答案！

【解决方案2】：

如果我正确理解了您的问题，您需要使用方括号语法来访问属性：

new AjaxUpload(thisId, {
    action: thisUrl,
    name: 'thisfile',
    onSubmit: function () { //Anonymous function so you can pass arguments
        imageObject[thisSubmit]("myArg"); //Square brackets here
    },
    onComplete: imageObject[thisCallback] //Square brackets here (no arguments)
});

【讨论】：

是的，这是合理的，如果这些变量实际上是字符串。不过，这个问题非常不清楚！
但是没有解决将参数传递给它们的问题。
@Alnitak - 是的。我假设 attr 是 jQuery attr 方法，它总是返回一个字符串。但实际上并没有提到 jQuery，所以它可以是任何东西。
@T.J.Crowder - 也是如此，已编辑。
对不起伙计们——是的，该属性只存储对象中方法的名称（字符串）——所以例如'uploadImage'。

【解决方案3】：

我假设 thisSubmit 和 thisCallback 局部变量是存在于 imageObject 上的函数的名称。

使用这些字符串中的名称调用这些方法，并传入参数，您使用括号语法和闭包的组合：

var imageObject = {
    sendImage : function(obj) {
        "use strict";
        var thisId = obj.attr('id');
        var thisSubmit = obj.attr('data-submit');
        var thisCallback = obj.attr('data-callback');
        var thisUrl = $('#' + obj.attr('data-url')).text();
        new AjaxUpload(thisId, {
            action: thisUrl,
            name: 'thisfile',
            onSubmit: function() {
                imageObject[thisSubmit](arg, anotherArg, etc);
            },
            onComplete: function() {
                imageObject[thisCallback](arg, anotherArg, etc);
            }
        });
    }
    // Presumably there are more methods here, or added later...
}

【讨论】：

是的 - 这正是属性返回并分配给变量的内容。

【解决方案4】：

你必须使用call 在js中调用一个函数

onSubmit: function(file, extension) {
    imageObject.thisSubmit.call(undefined, file,extension);
},

见What is the difference between call and apply?

【讨论】：

嗯，不，你没有。给定一个函数引用，如果您想在调用该函数时更改 this 在该函数中的值，则只需使用 .call 或 .apply。
或者如果您想将参数作为数组提供（使用.apply）
为什么不imageObject.thisSubmit(file,extension)？
@FelixKling 必须是 imageObject[thisSubmit](file, extension)。
@Alnitak：啊，是的，这就是我的意思 :) 所以答案实际上在任何方面都是错误的......