JavaScript嵌套名称空间中的继承

Question

我想设置嵌套的名称空间来组织我的代码。 我试图按照中所描述的插件状结构这篇文章 。 问题是我不理解如何在示例中访问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();

和小提琴

您确实有其他选择，例如像@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...'; 

在您的情况下，一旦您调用TC.ajax() ，就会将error_msg分配给this ，这永远不会发生。 即使这样， this也将指代TC 。 当TC.ajax.handle_error()时， this指向TC.ajax 。

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 。 我在相关文章的评论中找到了这种方法。