Question

在javascript功能对象中使用时，我遇到了关于javascript“this”关键字的问题。我希望能够创建一个对象来处理Modal弹出窗口（JQuery UI对话框）。

该对象称为CreateItemModal。我希望能够实例化并传递一些配置设置。其中一个配置设置。调用show方法时，将显示对话框，但取消按钮不起作用，因为它引用了DOM对象而不是CreateItemModal对象。

我如何解决这个问题，或者是否有更好的方法将单独的行为放在单独的“类”或“对象”中。我尝试了几种方法，包括将“this”对象传递给事件，但这并不是一个干净的解决方案。

见下面的（简化）代码：

function CreateItemModal(config) {
    // initialize some variables including $wrapper
};

CreateItemModal.prototype.show = function() {
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: this.close
        }
    });
};

CreateItemModal.prototype.close = function() {
    this.config.$wrapper.dialog('close');
};

Answer 1

你需要创建一个闭包来捕获this上下文，我倾向于使用匿名函数来执行此操作，如下所示： -

CreateItemModal.prototype.show = function() {
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: (function(self) {
              return function() { self.close.apply(self, arguments ); }
            })(this);
        }
    });
};

Answer 2

在JavaScript中遇到“this”问题的每个人都应该阅读并消化此博文：http://howtonode.org/what-is-this

你也可以选择谷歌“道格拉斯克罗克福德”并观看他的一些（免费）视频。

Answer 3

试试这个：

CreateItemModal.prototype.show = function() {
    var me = this;
    this.$wrapper.dialog({
        buttons: {
            // this crashes because this is not the current object here
            Cancel: me.close
        }
    });
};

它之所以不起作用，是因为“this”指的是对话框，而不是指那个类。

Answer 4

尝试添加一个等于全局的变量，例如

function CreateItemModal(config) {
    // initialize some variables including $wrapper
};

CreateItemModal.prototype.show = function() {
    var $this = this;
    this.$wrapper.dialog({
    buttons: {
        // this crashes because this is not the current object here
        Cancel: $this.close
    }
});

至于我，它在大多数情况下都适用

Javascript函数对象，这个关键字指向错误的对象

4 个答案: