如何在Javascript中交叉引用類

Question

有沒有一種方法可以從不同的名稱空間中交叉引用類或實例變量的實例，並考慮到它在主html中定義的腳本文件的順序很重要應用。實際上，我想知道是否有可能交叉引用兩個不同的類實例，一個指向在另一個名稱空間中定義的引用，另一個定義在第二個類中的變量指向第一個。

假設我有一個main.js文件，其中我定義它使用在另一個命名空間中定義一些實例變量的一類，讓我們在particle.js，在此，同時我定義一個變量指向回Main類公共變量說。

var Main = (function() { 
    var p = new Particle(); 

    this.draw = true; 
    this.width = 800; 
    this.height = 600; 

    function print() { 
     console.log(p.width, ':', p.height); 
    } 

    return { 
     draw : this.draw, 
     width : this.width, 
     height : this.height, 
     print : print 
    } 
})(); 

function Particle() { 

    this.width = Main.width; 
    this.height = Main.height; 
    this.print = function() { 
     console.log(this.width, ':', this.height); 
    }  
} 


var p = new Particle(); 
p.print(); 
Main.print(); 

...並在*.html JavaScript文件順序將是：

<script src = 'main.js'></script> 
<script src = 'particle.js'></script> 

其實這個代碼工作，如果你嘗試在螢火例如如預期，但在相同的邏輯在我的真實應用程序中，這非常複雜，我在控制檯中遇到了Main is undefined錯誤。我知道可以使用AMD和Require.js來模擬真實的課程模塊，但我現在不想在AMD上進行傳遞。

Answer 1

我沒有設法讓您的代碼在Chrome或Firefox上工作，我總是在Main.width上遇到錯誤。

問題在於當您Main尚未完全構造時，請參閱主內部粒子。

沒有簡單的解決方案，我認爲最好的方法是在定義了粒子類之後延遲部分主單體的初始化。 或者，您也可以重新排列代碼以遵守依賴關係。

你必須記住，在JavaScript中，你的代碼在你調用它時被評估。

這裏是我的兩個建議：

解決方案1 ​​：延遲初始化主要部分

// Main.js --> loaded first 
var Main = new (function() { 
    this.draw = true; 
    this.width = 800; 
    this.height = 600; 

    // delayed initialization method 
    this.init = function() 
    { 
     var p = new Particle(); 
     this.print = function() { 
      console.log(p.width, ':', p.height); 
     } 
    } 
})(); 

//Particle.js --> loaded second 
function Particle() { 
    this.width = Main.width; 
    this.height = Main.height; 
    this.print = function() { 
     console.log(this.width, ':', this.height); 
    }  
} 

// call the delayed init method 
Main.init() 

var p = new Particle(); 
p.print(); 
Main.print(); 

解決方案2：拆分在3個文件要尊重依賴

//Particle.js --> loaded first 
function Particle() { 
    this.width = Main.width; 
    this.height = Main.height; 
    this.print = function() { 
     console.log(this.width, ':', this.height); 
    }  
} 

// Main.js --> loaded in second position 
var Main = (function() { 
    var p = new Particle(); 
    this.draw = true; 
    this.width = 800; 
    this.height = 600; 
    function print() { 
     console.log(p.width, ':', p.height); 
    } 
    return { 
     draw : this.draw, 
     width : this.width, 
     height : this.height, 
     print : print 
    } 
})(); 

// Init.js --> loaded third 
var p = new Particle(); 
p.print(); 
Main.print();