javascript - 为什么我的原型(prototype)函数中出现 'this.setData is not a function'？

Question

不久前，我使用 Prototype 创建了一个对话函数。代码如下所示:

//Dialog constructor
var sldialog = function(params, callback){
    this.box         = // (...)
    this.background  = // (...)
    this.buttonPanel = // (...)
    this.callback    = callback;
    this.options     = $.extend({
     // (...)
    },params);

    this.setData();
    this.showDialog();
    this.dialogboxAction();
};

// Dialog functions
sldialog.prototype = {
    setData: function(){ (..) },
    showDialog: function(){ (..) },
    dialogboxAction: function(){ (..) },
};

我使用以下代码调用该函数:

    sldialog({
        title: 'Delete peprson',
        msg: 'Do you really want to delete this person?',
        type: 'action',
        yes: 'Delete person',
        multiDialog: 1
    }, function (confirmed) {
      // (...)
    });

现在我收到错误:this.setData 不是函数。
我在使用原型(prototype)方面没有太多经验，因为我是通过查看一些教程来做到这一点的。

到目前为止，这一切都运行良好。我看不出代码中其他位置的更改如何影响这一点。

Answer 1

您的sldialog函数是一个构造函数；您可以通过new调用构造函数。因此，您需要将其添加到您调用它的位置:

new sldialog({
    title: 'Delete peprson',
    msg: 'Do you really want to delete this person?',
    type: 'action',
    yes: 'Delete person',
    multiDialog: 1
}, function (confirmed) {
  // (...)
});

原因是，尽管我们称它们为“构造函数”，但创建对象的并不是函数，而是 new 运算符。 new 创建对象，分配原型(prototype)，然后用 this 引用新对象来调用构造函数。

<小时/>

旁注:JavaScript 中压倒性的约定是构造函数名称的开头是上限的。因此，也许是 SLDialog 或 Sldialog 或 SlDialog 而不是 sldialog。

<小时/>

旁注 2:一般来说，我不鼓励人们替换函数的 prototype 属性指向的对象；相反，我建议只添加它:

sldialog.prototype.setData = function() { ... };
sldialog.prototype.showDialog = function() { ... };
sldialog.prototype.dialogboxAction = function() { ... };

(是的，它会重复，所以我通常有一个将属性复制到其中的函数。)

不过，如果您愿意，您可以继续替换它；只需确保将构造函数设置回旧对象上的默认值即可:

sldialog.prototype = {
    constructor: sldialog,              // <===
    setData: function(){ (..) },
    showDialog: function(){ (..) },
    dialogboxAction: function(){ (..) },
};

这样，您就可以确保原型(prototype)到构造函数的反向链接得到维护。