1

I'm trying to understand how I can break down functionality by files in javascript. I'm trying to think of namespaces as singleton classes. I don't understand why in the code below, MODULE_A.privateMethod1() throws the error: Uncaught TypeError: undefined is not a function. When I open up the logged object, I can't see the private methods there either.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test Project</title>

    <script src="index.js"></script>
    <script src="moduleA.js"></script>
  </head>
    <body>
      <div>
        hi
      </div>
  </body>
</html>

index.js:

(function() {

  var initializeWindow = function() {
    console.log("initializeWindow");
    MODULE_A.publicMethod1();
  };

  window.addEventListener('load', initializeWindow);
})();

moduleA.js:

// "Singleton Class"
var MODULE_A = (function() {
  // ---------------------------------------------------------------------------
  // "Private" Class Constants
  // ---------------------------------------------------------------------------
  var A_CONSTANT_NUMBER = 1;

  // ---------------------------------------------------------------------------
  // "Private" Class Variables (Properties)
  // ---------------------------------------------------------------------------
  var myPrivateVar_ = 2;

  // ---------------------------------------------------------------------------
  // "Private" Methods
  // ---------------------------------------------------------------------------
  var privateMethod1 = function() {
    console.log("A.privateMethod1");
  };

  var privateMethod2 = function() {
    console.log("A.privateMethod2");
  };

  return {
    // ---------------------------------------------------------------------------
    // "Public" Class Variables (Properties)
    // ---------------------------------------------------------------------------
    aPublicVar1: 3,

    // ---------------------------------------------------------------------------
    // "Public" Methods
    // ---------------------------------------------------------------------------
    publicMethod1: function() {
      console.log("A.publicMethod1");
      this.publicMethod2();
      // ERROR HERE!!!
      this.privateMethod1();
      this.privateMethod2();
    },

    publicMethod2: function() {
      console.log("A.publicMethod2");
    }
  }
})();

enter image description here

tarabyte
  • 14,444
  • 10
  • 58
  • 93
  • 3
    Remove the `this.` part. The functions you are trying to access are not part of the object you are returning, since they are not supposed to be public. They are *local variables* inside the module IIFE. – Felix Kling Oct 01 '14 at 01:15
  • Closest duplicate? http://stackoverflow.com/questions/3127429/javascript-this-keyword – elclanrs Oct 01 '14 at 01:16
  • I've tried replacing ```this.``` with ```MODULE_A.``` and still the same error – tarabyte Oct 01 '14 at 01:21
  • 1
    No surprise here, since `this === MODULE_A`. As I said, the object that `this` (and `MODULE_A`) refers to doesn't have such properties. `privateMethod1` and `privateMethod2` are **variables**. How do you access variables? By just referencing their name. E.g. `var foo = 42; alert(foo);` (no `this.foo`). – Felix Kling Oct 01 '14 at 01:51
  • This question could be asked in much fewer lines of code, see [*How to create a Minimal, Complete, and Verifiable example*](http://stackoverflow.com/help/mcve). – RobG Oct 01 '14 at 03:46
  • @jfriend00—yes, comment deleted. – RobG Oct 01 '14 at 03:46

1 Answers1

3

The solution is one of the two :

When you declare something with var, it cannot be accessed with this

either :

this.privateMethod1 = function() {
console.log("A.privateMethod1");
};

or

 publicMethod1: function() {
  console.log("B.publicMethod1");
  this.publicMethod2();
  privateMethod1();
  privateMethod2();
},

edit: if you want the method as private, you should follow method2, you can go to this site for more explanation.

Scimonster
  • 30,695
  • 8
  • 67
  • 84
mido
  • 20,728
  • 10
  • 84
  • 109