JavaScript - Constructing global objects with nested functions

Question

I'm quite new to JavaScript, and for the life of me I can't fugure out how to correctly construct a global object in my script:

var Global =
    {
        button1Handler: function () {
            this.button1 = $("#button1");
            this.init = function () {
                this.button1.on("click", function () { alert("button1 clicked"); });
            }
        },
        button2Handler: function () { /* ... */ },
        init: function () {
            this.button1Handler.init();
            this.button2Handler.init();
        }

    };

$(function () {
    Global.init();
});

This code produces the following error:

TypeError: this.button1Handler.init is not a function

If I change it to this.button1Handler().init(); the error goes away, but the Button1Handler.init() function never gets called.

How do I correct the code above?

this.button1Handler is not a object that you are accessing its property! — Rayon
– Rayon, Commented Apr 22, 2016 at 10:21
this in button1Handler refer to Global object not to button1Handler — jcubic
– jcubic, Commented Apr 22, 2016 at 10:31

AKS · Accepted Answer · 2016-04-22 10:23:16Z

1

I am not sure why you have to do like this. But if you really want to you can achieve what you want with this:

    button1Handler: function () {
        return {
             button1: $("#button1"),
             init: function () {
                this.button1.on("click", function () { alert("button1 clicked"); });
             }
        };
    },

and then you can call init as this.button1Handler().init().

In this case this.button1Handler() function returns an object which further has an init method.

answered Apr 22, 2016 at 10:23

AKS

20k3 gold badges47 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajesh Dixit · Accepted Answer · 2016-04-22 10:32:52Z

You are getting error because this.button1Handler is a function and you will have to create an instance of it to access properties of it.

var Global = {
  button1Handler: function() {
    //this.button1 = $("#button1");
    this.init = function() {
      //this.button1.on("click", function () { alert("button1 clicked"); });
      console.log("Button1 init")
    }
  },
  button2Handler: function() {
    this.init = function() {
      console.log("Button2 init")
    }
  },
  init: function() {
    new this.button1Handler().init();
    new this.button2Handler().init();
  }

};

(function() {
  Global.init();
})();

A better solution is to return necessary properties:

Sample

var Global = {
  button1Handler: function() {
    var button1 = $("#button1");
    var init = function() {
      button1.on("click", function() {
        console.log("Button1 clicked")
      });
    }
    return {
      init: init
    }
  },
  button2Handler: function() {
    var button2 = $("#button2");
    var init = function() {
      button2.on("click", function() {
        console.log("Button2 clicked")
      });
    }
    return {
      init: init
    }
  },
  init: function() {
    this.button1Handler().init();
    this.button2Handler().init();
  }

};

(function() {
  Global.init();
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="button1">button 1</button>
<button id="button2">button 2</button>

In the following code, button1 is a private variable since it is not exposed using return statement, but init is public property. So you can have any number of properties, but only the properties that you return will be public properties.

button1Handler: function() {
  var button1 = $("#button1");
  var init = function() {
    button1.on("click", function() {
      console.log("Button1 clicked")
    });
  }
  return {
    init: init
  }
}

Aditya Vyas-Lakhan · Accepted Answer · 2016-04-22 11:19:29Z

0

It is because button1Handler does not return an executed function. In this.button1Handler().init() button1Handler function is invoking the init there this will point to the button1Handler() scope hence function init will be accessible.

edited Apr 22, 2016 at 11:19

Aditya Vyas-Lakhan

13.6k16 gold badges65 silver badges97 bronze badges

answered Apr 22, 2016 at 11:11

Rahul Kandari

412 bronze badges

Collectives™ on Stack Overflow

JavaScript - Constructing global objects with nested functions

3 Answers 3

Comments

Sample

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Sample

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related