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

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();