title: Where in a program's scope is it preferred to place a JavaScript utility class?
body: <p>I'm working on a somewhat large-scale JS application and I want to break out some common functions into a utility class. I'm not quite clear on how I should go about it, however.</p>
  
  <p>For example, say I have a bunch of shape-based classes that need to call a function in the utility class:</p>
  
  <pre><code>// Triangle class
  Triangle.prototype = new Shape();
  Triangle.prototype.constructor = Triangle;
  
  function Triangle() {...}
  Triangle.prototype.drawOutline = function() {
    var outline = Utility.canvas.trace(this._canvas); // Trace the shape.
    this._viewport.drawImage(outline, 0, 0); // Draw the traced outline.
  }
  
  // Circle class
  Circle.prototype = new Shape();
  Circle.prototype.constructor = Circle;
  
  function Circle() {...}
  Circle.prototype.drawOutline = function() {
    var outline = Utility.canvas.trace(this._canvas); // Trace the shape.
    this._viewport.drawImage(outline, 0, 0); // Draw the traced outline.
  }
  </code></pre>
  
  <p>Does it make sense to instantiate the <code>Utility</code> class at the global level? I feel like there should be an additional level above it, something like <code>Application</code> so I'd have <code>Application.Utility</code>, <code>Application.UI</code>, and so on. Unfortunately, going this route forces each specialized shape class to know what the greater program structure is (so it can reference <code>Application.Utility</code>), which isn't very good.</p>
  
  <p>Is there a better, preferred manner to have specialized JS classes make use of generalized class functions that aren't inherited?</p>
  
  <hr>
  
  <p><strong>Edit:</strong> It might help to say that I'm trying to relate this to an <code>#include</code> or <code>import</code> statement from C++ or Java. What's the best way to go about this in JS?</p>