javascript命名空间调用其他函数方法

Question

我尝试改变一些将方法调用到命名空间的方式。

• 调用父方法（我认为不可能）
• 创建和调用继承函数
• 在另一个方法中调用（主要是 jquery onReady 事件函数）（this.MyFunction() 不起作用）

我在文件中拆分每个命名空间（希望保持这种方式）

我尝试How to call function A from function B within the same namespace?，但没有成功拆分命名空间。

我的小提琴样本只有 1 个子命名空间，但可能更多。

https://jsfiddle.net/forX/kv1w2rvc/

 /**************************************************************************
    // FILE Master.js
    ***************************************************************************/
    if (!Master) var Master = {}; 
    Master.Print= function(text){
        console.log("master.Print :" + text);
      $("body").append("<div>master.Print : " + text + "</div>");
    }

    /**************************************************************************
    // FILE Master.Test1.js
    ***************************************************************************/
    if (!Master) var Master = {};
    if (!Master.Test1) Master.Test1  = {};
    /**************************************************************************
    * Descrition :
    *   Function for managing event load/documentReady
    **************************************************************************/
    Master.Test1.onReady = function () {
        $(function () {
            Master.Test1.Function1();   //try to replace because need all namespace.          

            try {
                   this.Function2(); //not working
            }
            catch(err) {
                console.log("this.Function2 not working");
                $("body").append("<div>this.Function2 not working</div>");
            }   

           try {
                this.Print("onReady");  //not working
           }
           catch(err) {
                console.log("this.Print not working");
              $("body").append("<div>this.Print not working</div>");
           }

          try {
                Print("onReady"); //not working
          }
          catch(err) {
                console.log("Print not working");
                $("body").append("<div>Print not working</div>");
          }     

        });
    }

    Master.Test1.Function1 = function () {
        console.log("Function1");
        $("body").append("<div>Function1</div>");    
        this.Function3();      //working because not inside another function   
    }

    Master.Test1.Function2 = function () {
            $("body").append("<div>Function2</div>");
        console.log("Function2");   

    }


    Master.Test1.Function3 = function () {
            $("body").append("<div>Function3</div>");
        console.log("Function3");

        Master.Print("Function3");  //try to replace because need all namespace.        
    }

    Master.Test1.onReady();

• 我使用 Master.Test1.Function1();我想改变它，因为 Function1 在同一个命名空间内。

• 我使用 Master.Print("Function3");我不认为我可以改变这一点。我尝试使用它的方式，它更像是一个继承功能。但我不知道有没有办法做到这一点？

也许我应该更改我的命名空间方法？也许原型会做我想做的事？

Answer 1

javascript 中的“对象”的构建方式与大多数面向对象语言不同。本质上，您正在构建的是静态方法的层次结构，它们本身没有真正的内部状态。因此，当调用定义的方法之一时，该方法的上下文（或状态）取决于调用该方法的对象。

如果您想拥有任何内部上下文，则需要创建“对象原型”的“实例”。此时，您可以在其他函数中使用“this.otherFunction”。这是一个小例子：

var MyObject = function() {};

MyObject.functionOne = function() {
    console.log("Function 1");
    this.functionTwo();
};

MyObject.functionTwo = function() {
    console.log("Function 2");
};

var instanceOne = new MyObject();
instanceOne.functionOne();

您可能会获得有关对象定义的更多信息here

Answer 2

您可以在变量中捕获this，因为$(function() {}) 中的this 将指向document 对象。如果您从不更改 onReady 的调用上下文，则以下内容将起作用——即它始终在 Test1 对象上调用，而不是在其他上下文中调用：

Master.Test1.onReady = function () {
    var self = this;
    $(function () {
        self.Function1();
        // ..
    });
}

要访问Print，您必须使用Master 对象进行引用，例如：Master.Print()，因为它在Test1 对象中不可用

Answer 3

this 是 document 内的 .ready() 或 jQuery() .ready() 的别名，其中 function(){} 是参数 $(function() {})。 this this.Function2() 将引用 document。