Javascript class creation

Question

I currently use this style to create a js class like structure:

   var JSClass  =   (function(){
       console.log('JSClass Init');
       //-- Set up private var and fnc here
       var opt  =   {
              width:    0,
           height:  60
           }

       function _PrivateSum(g){
           return (g * opt.width);
       }

       //-- Set up public access here
       function JSClass(){ //the class constructor
           //-- class attributes

       }
           //-- class methods
       JSClass.prototype    =   {
           getWidth : function(){
               return _PrivateSum(opt.width);
           },
           setWidth : function(w){
               console.log('JSClass setWidth: ' + w);
               opt.width    =   w;
           },
           getHeight : function(){
               console.log('JSClass getHeight');
               return opt.height;
           },
           setHeight : function(h){
               opt.height = h;
           }

           };

           return JSClass;

   }());

init by calling the following in another page:

   var jc   =   new JSClass();

This is all good etc but if I then need to create a class that I would like to use several times on the same page: var jc = new JSClass(); var jc2 = new JSClass();

At present if I change anything within the first "jc" then it also controls what is in the second "jc2".

So my question is how would I go about creating a fresh instance of my JSClass() class so that i can manipulate each one individually with out effecting the current one, similar to php classes etc

I believe I would need to somehow create a clone of the original but am not sure, or if there is a better way than above please feel free to inform me

much appreciated

You should take a look at this article : ejohn.org/blog/simple-class-instantiation . Otherwise, I'd say to use return new JSClass in your class. — Florian Margaine
– Florian Margaine, Commented Feb 23, 2012 at 10:11
Inside the closure you overwrite the var defined on the outside "JSClass" - just pointing out this detail, would not do it this way at all myself - see the references (links) that will inevitably be given here. (This overwrite doesn't mean that whatever you want to achieve would not work - the computer won't be confused, but HUMANS reading the code are.) — Mörre
– Mörre, Commented Feb 23, 2012 at 10:14
Also recommend checking out this class from the JavaScriptMVC project javascriptmvc.com/docs.html#!jQuery.Class It's based on the simple class by John Resig mentioned by Florian in the first comment — Martin Hansen
– Martin Hansen, Commented Feb 23, 2012 at 11:02

BenMorel · Accepted Answer · 2013-11-24 15:46:50Z

1

I like to use a construction like this: note: no new-statement.

//definition
var myClass = function() {
    var abc = 1; //private properties

    function f1() {...}; //private methods

    return {
        bar: function() {} //public function *with* access to private members and functions
    };
};

//usage:

var myInstance1 = myClass();
var myInstance2 = myClass();

edited Nov 24, 2013 at 15:46

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Feb 23, 2012 at 10:31

zaphod1984

8562 gold badges8 silver badges24 bronze badges

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

2 Comments

Mörre Over a year ago

I scream, yes: THIS IS NOT A GOOD EXAMPLE TO COPY. The BIG disadvantage: This wastes a lot of memory! For EACH INSTANCE the private functions are copied. That's why the prototype is a better place. Better sources: look for (google) classical, parasitic, and mixed inheritance (the mix is best). Modern JS libs like YUI show how it's done (on their web pages and in their code). A GREAT source are the presentations from Douglas Crockford on developer.yahoo.com/yui/theater (it is general JS stuff, not specific to the particular JS lib, YUI3, which Yahoo makes).

zaphod1984 Over a year ago

i agree. but i think it depends on the usecase if you have tons of instances of the class it might be better to use a declaration the utilizes the prototype.

Andreas · Accepted Answer · 2012-02-23 10:57:41Z

1

All Your class instances will use the same opt object, so changing it in one instance will change it for all other instances, too.

You'll have to move opt into the constructor function. The prototype functions than loose access to opt, of course. If you want to use the functional approach for classes with private members, you have to give up the beauty of the prototype, and inheritance will be complicated. But you'll get real private members.

Crockford's "The Good Parts" is a reading I would recommend for these things.

answered Feb 23, 2012 at 10:57

Andreas

1,62214 silver badges13 bronze badges

Comments

Mörre · Accepted Answer · 2012-02-23 11:10:48Z

1

Your variables ("opt") are STATIC (class variables - i.e. shared across all instances of the class) not instance variables. Instance variables are properties on the "this" object, which you create in the constructor and/or the two set(ter) functions you have. In setWidth,setHeight replace opt.width (or height) with this.width (or height) and remove the static var "opt".

Also, move _PrivateSum into the prototype object or you willo have trouble accessing the new instance variable just introduced - unless you call it using _PrivateSum.call(this, this.width), because when calling it as you do now "this" will be wrong, but if it's an instance method and you call it with this._PrivateSum(...) inside it "this" will point to the correct object.

edited Feb 23, 2012 at 11:10

answered Feb 23, 2012 at 10:21

Mörre

5,7536 gold badges40 silver badges68 bronze badges

Collectives™ on Stack Overflow

Javascript class creation

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related