How to cross reference classes in Javascript

Question

Is there a way to cross-reference an instance of a class or instance variable from different namespaces, given that it matters in which order the script files defined in the main html application are located. In fact, I want to know if it is possible to cross-reference two different instances of a class, one pointing to a link defined in another namespace, and the other variable defined in the second class, referring to the first.

Suppose I have a main.js file where I define a class that uses some instance variables defined in another namespace, say in particle.js , where on At the same time I define a variable by accessing the Main public variable .

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

... and in *.html order of the javascript files will be:

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

Actually this code works, as expected, if you try it in firebug, for example, but by the same logic of my real application, which is very complicated, I got the Main is undefined error in the console. I know that it is possible to simulate real-class modules using AMD with the requirement. Js, for example, but I don't want to relay to AMD right now.

Answer 1

I was not able to get your code to work in Chrome or Firefox, I always get the Main.width error Main.width .

The fact is that you are referring to the main inner particle when you are not yet fully constructed.

There is no easy solution, the best I can think of is to postpone the initialization part of your main singleton after you define the Particle class. Alternatively, you can also reorder the code to respect dependencies.

You must remember that in javascript, your code is evaluated when you call it.

Here are my two suggestions:

Solution 1 : Deferring Basic Initialization Partially

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

Solution 2 : split into 3 files for dependency accounting

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