Question

我想设置嵌套的命名空间来组织我的代码。我试图遵循this article中描述的类似插件的结构。问题是我不明白如何在我的示例中访问this.error_msg。我是否正确设置了它？我是否必须使用jQuery .extend或.prototype来访问this.error_msg？

(function(TC, $, undefined){

    TC.ajax = function() {
        this.error_msg = 'default error...';         
    };

    TC.ajax.run = function(){
        //do stuff...
        TC.ajax.handle_error();
    };

    TC.ajax.handle_error = function(){
        alert(this.error_msg);
    };        

}(window.TC = window.TC || {}, jQuery));

// Test it
TC.ajax.run();

演示：http://jsfiddle.net/g99yt/

Answer 1

我认为您的代码必须如下所示：

(function(TC, $, undefined){
    _this = this;
    TC.ajax = function() {
        _this.error_msg = 'default error...';         
    };

    TC.ajax.run = function(){
        //do stuff...
        TC.ajax.handle_error();
    };

    TC.ajax.handle_error = function(){
        alert(_this.error_msg);
    };        

}(window.TC = window.TC || {}, jQuery));

// Test it
TC.ajax.run();

Answer 2

要记住的重要一点是，每次使用function()时，都会创建一个新范围。因此，您可以在TC.ajax.handle_error方法中看到this.error_msg未定义，因为您尚未在该范围内定义它。您可以做的一件事是原型，以确保这些方法与您的ajax对象相关并声明对象的新实例，然后在其上调用您的方法。见下文：

(function(TC, $, undefined){

    TC.ajax = function() {
        this.error_msg = 'default error...';         
    };

    TC.ajax.prototype.run = function(){
        //do stuff...
        this.handle_error.call(this);
    };

    TC.ajax.prototype.handle_error = function(){
        alert(this.error_msg);
    };        

}(window.TC = window.TC || {}, jQuery));

// Test it
 var ajaxInstance = new TC.ajax();

ajaxInstance.run();

和fiddle

你还有其他选择，例如保留@kta这样的本地全局变量，或者通过call函数设置范围，但这并不适用于你的结构。

Answer 3

这实际上是一个常见问题，并不是很清楚this指的是什么。所以解释一下：

TC.ajax.handle_error = function(){
    alert(this.error_msg);
};

this函数中的TC.ajax.handle_error是指函数，而不是TC对象。所以只需保存对TC的引用，以便稍后可以参考：

var _this = this;

...
_this.error_msg = 'default error....';
...

TC.ajax.handle_error = function(){
     alert(_this.error_msg);
 };

Answer 4

如果TC.ajax应该是构造函数，则需要将run()和handle_error()添加到原型中。

但你可以做类似

的事情

TC.ajax = {};    
TC.ajax.error_msg = 'default error...';

在您的情况下error_msg，只要您致电this，就会将TC.ajax()分配给this，这种情况从未发生过。即便如此，TC也会引用TC.ajax.handle_error()。当this被调用时，TC.ajax会引用{{1}}。

Answer 5

这是我最终使用的：

(function ($, TC, undefined) {

    TC.nestedNamespace = TC.nestedNamespace || {};

    //add a public function to our new namespace 
    TC.nestedNamespace.test = function () {        
       console.log("Winning!");    
    };

}(jQuery, window.TC = window.TC || {}));

TC.nestedNamespace.test();

示例JSFiddle。我在related article的评论中找到了这种方法。

JavaScript中嵌套命名空间的继承

5 个答案: