Javascript Library Object Method declarations

Question

I am kind of a OO js noobie and am trying to create a new Javascript library the correct way but am struggling to understand how best to do this and make it work properly. I would like my library to self invoked so that an object ABC is instantiated as soon as the js library file is included in the html. However, then users should be able to call methods on that object in the html page.

I've tried a few different versions of the below code, but can't seem to get the prototype method for declaring methods to work properly. On my HTML page, I can call ABC.alert(); and it properly executes the alert message. However, when I try to call ABC.alert2(); which is using prototype inheritance which I understand is more memory efficient than just declaring methods right inside the object constructor, I can't seem to get that to work. I keep getting ABC.alert2 is not a function. I do see that my ABC object does have the proto property, but I can't seem to figure out how to define methods properly using prototype. Is it because I'm using a self invoked function? Should I not use a self invoked function and instead at the bottom of my library just create a new instance of my object manually with var ABC = new defineABC(); line?

jsbin link

Also copied below:

(function (window) {
  'use strict';

  function defineABC() {
    var ABC = {};
    ABC.alert = function() {
      alert("hello this is working");
    };

    ABC.prototype.alert2 = function() {
      alert("hello prototype is working inside constructor");
    };

    return ABC;

  }

  defineABC.prototype.alert3 = function() {
    alert("hello prototype is working outside constructor");
  };

  if (typeof(ABC) === 'undefined') {
    window.ABC = defineABC();
  }

})(window);



ABC.alert(); //successful

ABC.alert2(); //fails

ABC.alert3(); //fails

adrianj98 · Accepted Answer · 2016-05-02 21:32:35Z

1

You need to create an instance of your object to use the prototype methods.

  var abc = new defineABC()

  abc.alert2();  

  abc.alert3();

so u can define it in your code like this

     if (typeof(ABC) === 'undefined') {
        window.ABC = new defineABC();
    }

You final code could look like this:

(function (window) {
  'use strict';

  function defineABC() {
  }

  defineABC.prototype.alert3 = function() {
    alert("hello prototype is working outside constructor");
  };

  defineABC.prototype.alert = function() {
      alert("hello this is working");
    };

  defineABC.prototype.alert2 = function() {
      alert("hello prototype is working inside constructor");
    };

  if (typeof(ABC) === 'undefined') {
    window.ABC = new defineABC();
  }

})(window);

edited May 2, 2016 at 21:32

answered May 2, 2016 at 20:36

adrianj98

5732 silver badges9 bronze badges

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

5 Comments

shredtechular Over a year ago

Thanks for the reply! I tried this in a jsbin, but it doesn't seem to be working either: jsbin link If I understand correctly, the if (typeof(ABC) === 'undefined') {window.ABC = new defineABC();} creates a new instance of the object, so I shouldn't need the var abc = new defineABC() instantiation, correct? I should just be able to call ABC.alert2(); due to the first object instantiation...however, even if I try that it's not working for me?

adrianj98 Over a year ago

I made a mistake. I was missing the "new" it should now work. I edited it

adrianj98 Over a year ago

And yes you do need new to use new again. I was just using it as a description

adrianj98 Over a year ago

you may also want to change typeof(ABC) to typeof(window.ABC)

shredtechular Over a year ago

Oh duh, just needed a new in there, okay, Got it, this works and makes sense now, thank you very much!

Роман Парадеев · Accepted Answer · 2016-05-02 20:45:46Z

0

Since ABC is only created once per page, it's okay to declare methods right on the object.

It is also no need in factory function or IIFE. You colud instantiate an object as simple as that.

window.ABC = window.ABC || {
  alert: function () {
    alert("hello this is working");
  }
};

edited May 2, 2016 at 20:45

answered May 2, 2016 at 20:41

Роман Парадеев

4,28621 silver badges37 bronze badges

2 Comments

adrianj98 Over a year ago

In this way you would not want to use prototype functions. but the "this" would not be bound to the function

Роман Парадеев Over a year ago

In both examples this would be bound to the ABC object.

Collectives™ on Stack Overflow

Javascript Library Object Method declarations

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related