如何在 javascript 中调用实例化类的函数？

Posted 2023-02-23

【中文标题】如何在 javascript 中调用实例化类的函数？

【英文标题】：How to call an instantiated class' function in javascript?

【发布时间】：2012-06-04 12:59:58

【问题描述】：

说实话，我可以调用该函数，但只是以硬编码的方式。我不想对提交绑定我的 getData 函数进行硬编码，而是想通过参数调用该函数。请帮助我，如何做到这一点。

谢谢。

formhandler = new xForm.Main(); // new formhandler
formhandler.setForm(this.formid); // fn.setForm(string) // configure the container, which has the form elements, or the form itself
modal = new xModal.Main(); // new modal handler
modal.setModal(this.modalid); // set modal element
modal.showModal(); // show
modal.bindClose(".cancel"); // bind closing classes
modal.bindSubmit(".submit", formhandler, "getData"); // bind submit to call formhandler.getData()

在 xModal.js 中

var xModal = xModal || ;

xModal.Main = function()

  var self = this;
  ...

this.bindSubmit = function(classname, a, b)

    this.closeclass = classname;
    $("#"+this.target).find(classname).click(function()
        a.call(b); // edited after the original post, i forgot to replace the call's argument to b in the question excuse me for the inaccuracy
    );

这个函数应该调用 xForm 中的 getData（这里是 xForm 的 sn-p）

var xForm = xForm || ;

xForm.Main = function()

var self = this;
this.target = "";
this.data = ;

...

this.getData = function()

    getSingleElements();
    getMultiElements();
    return returnData();

---

更新：

我想我刚刚找到了一种方法来做到这一点，但是如果我做错了什么，或者你有更好的解决方案（我很确定有人有），请告诉我

我想，我有正确的方法。

在xForm中我做了一个fn，它通过参数调用函数包含在self中（实际上等于this）

var xForm = xForm || ;

xForm.Main = function()

var self = this;

this.callFn = function(func)

    return self[func].call(this);


...

然后我从另一个类 (xModal) 调用 fn

var xModal = xModal || ;

xModal.Main = function()

var self = this;
this.bindSubmit = function(classname, a, b)

    this.closeclass = classname;
    $("#"+this.target).find(classname).click(function()
        a.callFn(b);
    );

那么我只需要告诉 xModal 这个：

modal.bindSubmit(".submit", formhandler, "getData"); // bind submit to call formhandler.getData()

所以现在模态类将调用 args[1] 的 args[2] 函数。也可以通过apply方法给调用fn更多的参数。

对我来说效果很好，但我不知道，也许你可以帮助我做得更好。

【参考方案1】：

您将某个对象的方法名称绑定到提交事件：

modal.bindSubmit(".submit", formhandler, "getData");

但是您也想将参数传递给方法。这不是 javascript 的做法。相反，只需将匿名函数绑定到事件，然后在此匿名函数中随意调用该方法：

modal.bindSubmit(".submit", function()
    formhandler.getData("My arguments");
);

您在我的示例中看到的是作为参数传递的匿名函数。在 Javascript 中，字符串或整数等值与函数之间没有区别。可以将函数分配给变量，并作为参数传递。

为了更清楚，也可以这样写：

var eventHandler = function()
    formhandler.getData("My arguments");
;

modal.bindSubmit(".submit", eventHandler);

这被称为“第一类函数”，是“函数式编程”范式的一部分。

在事件处理函数内部，您仍然可以访问创建它的 scooe 中的变量，例如 formhandler 对象。这称为“关闭”。

阅读此内容。一开始它会让你大吃一惊，但它真的值得你花时间，因为它会让你看到更简单的解决方案。

从您的示例中，我不确定对象模式是什么。如果它是一个 jQuery 元素，我的示例应该可以立即运行，否则，您需要更新代码以调用作为事件处理程序传入的函数，而不是调用对象上的方法。

【讨论】：

我不明白，对不起。 :( 请解释一下。

@Répás：我更新了答案以解释代码的作用。请测试它，如果它适合你，请接受我的回答。