Question

我正在使用以下模式编写一个小模块：

var inprModal = (function () {

    var validateAndSave = function() {
        var id = $('#Id').val();
        $.ajax({
            type: "POST",
            url: inprModal.url,
            data: {id: id },
            success: function(response) {
            },
        });
    };

    return {
        initialize: function () {
            $(document).ready(function() {
                $('#bSaveItem').click(function() {
                    validateAndSave();
                });
            });
        }

    };

})();

inprModal.url= '123';
inprModal.initialize();

我需要在外部分配一些参数，以便稍后在创建ajax请求时使用此值：

inprModal.url= '123';

但是，当我从回调中调用validateAndSave方法时，我必须将该属性与模块名一起使用才能访问它：

url: testModule.url

我想避免这种对方法的引用，而不是模块名称使用this或'self'属性。但是，当我只是将一个属性'self'添加到立即函数时，它引用了Window对象：

var inprModal = (function () {
    var self = this; // === Window

也许我应该在这里使用构造函数，但是在模块模式的许多示例中，我看到它只使用了没有构造函数的立即函数。

你能否建议如何做得更好？

Answer 1

原因是，当您从匿名回调函数调用方法validateAndSave时，它将在方法内部具有全局（窗口）的上下文，您可以尝试这种方式：

 return {
    initialize: function () {
         var self = this;
        $(document).ready(function() {
            $('#bSaveItem').click(function() {
                 validateAndSave.call(self); //call it with self
            });
        });
    }
 };

或者只是这样做：

return {
   initialize: function () {
     var self = this;
    $(document).ready(function() {
        $('#bSaveItem').click($.proxy(validateAndSave, self));
    });
}

Answer 2

似乎您需要对对象进行受保护的引用，以防外部作用域inprModal被修改。

如果是这样，只需将模块中的对象保存到本地self变量，并在需要的地方引用它

var inprModal = (function () {
    var self = { // -- save your object to the self variable
        initialize: function () {
            $(document).ready(function() {
                $('#bSaveItem').click(function() {
                    validateAndSave();
                });
            });
        }
    };
    var validateAndSave = function() {
        var id = $('#Id').val();
        $.ajax({
            type: "POST",
            url: self.url, // -- referenced via self
            data: {id: id },
            success: function(response) {
            },
        });
    };

    return self; // -- return the object
})();

不需要使用通用this引用，因为它是单个对象。 JavaScript的this语义会使它成为一种笨重的方法。

Answer 3

我通常使用bind

var inprModal = (function () {

    var validateAndSave = function() {
        var id = $('#Id').val();
        $.ajax({
            type: "POST",
            url: this.url, // <---
            data: {id: id },
            success: function(response) {
            },
        });
    };

    return {
        initialize: function () {
            $(document).ready(function() {
                $('#bSaveItem').click(function() {
                    validateAndSave();
                }.bind(this)); // <---
            }.bind(this)); // <---
        }

    };

})();

inprModal.url= '123';
inprModal.initialize();

我应该如何在javascript模块中使用'this'（self）？

3 个答案: