Question

我创建了jQuery对话框类。

基类是 AlertDialog 。子类是 ChildAlertDialog 。

当实例化ChildAlertDialog时，它需要elementId（DOM id）和执行器对象（MyExcecutor实例），并使用关闭按钮显示警报查找对话框。

关闭按钮会触发MyExecutor的实例方法executeClose();

但是当我打电话时：

alertbox.displayDialog();

我收到错误：

executor is undefined
executor.executeClose();

如果我将executor传递给displayDialog（）方法，它就有效。所以我有点困惑，因为它可以用于其他语言，如Java，但javascript似乎不同。我应该只将执行者传递给displayDialog（）吗？或者有更好的方法吗？

------对话框类------------

//base class
function AlertDialog(elementId, executor) {
    this.elementId = elementId;
    this.height = null;
    this.width = null;

    this.displayDialog = function() {
        $(this.elementId).dialog({
            autoOpen: true,
            height: this.height,
            width: this.width,
            buttons: {
                'close me': function() {
                    executor.executeClose(); //ERROR HERE!!!!!
                }
            }
        });
}

//child class
function ChildAlertDialog(elementId, executor) {
    this.elementId = elementId;
    this.height = 70;
    this.width = 400;
}

//inheritance
ChildAlertDialog.prototype = new AlertDialog();
ChildAlertDialog.prototype.constructor = ChildAlertDialog;

使用ChildAlertDialog类的类。

function MyExcecutor() {

    this.execute = function() {
        //passing elementID and MyExecutor object to ChildAlertDialog
        var alertbox = new ChildAlertDialog("#someDiv",this);
        alertbox.displayDialog();
    }

    this.executeClose = function() {
        //do something when the dialog is closed
    }
}

Answer 1

函数参数的范围只是该函数。在对象创建期间调用ChildAlertDialog构造函数时，executor只能在ChildAlertDialog内访问。

为了确保displayDialog可以访问执行者，请明确调用AlertDialog：

function ChildAlertDialog(elementId, executor) {
    AlertDialog.call(this, elementId, executor);
    this.height = 70;
    this.width = 400;
}

或使executor成为对话框对象的属性。

function AlertDialog(elementId, executor) {
    this.executor = executor;
    ...

    this.displayDialog = function() {
        ...
                    this.executor.executeClose();
}

//child class
function ChildAlertDialog(elementId, executor) {
    this.executor = executor;
    ...
}

这个问题，creation of prototypes and object initialization之间缺乏分离，导致Douglas Crockford开发Object.create，现在正在成为standard浏览器本机JS函数。

function AlertDialog(elementId, executor) {
    this.elementId = elementId;
    this.executor = executor;
}
AlertDialog.prototype.height = null;
AlertDialog.prototype.width = null;
AlertDialog.prototype.displayDialog = function() {
    $(this.elementId).dialog({
        autoOpen: true,
        height: this.height,
        width: this.width,
        buttons: {
            'close me': function() {
                this.executor.executeClose();
            }
        }
    });
};


//child class
function ChildAlertDialog(elementId, executor) {
    AlertDialog.call(this, elementId, executor);
    this.height = 70;
    this.width = 400;
}

//inheritance
ChildAlertDialog.prototype = Object.create(AlertDialog.prototype, 
        {constructor: {value: ChildAlertDialog, writable: false, enumerable: false}});

javascript OOP - 如何从实例方法中看不到参数对象？

1 个答案: