CODEWITHSUNDEEP
javascriptjavascript-framework
Simon Davies
Simon Davies

Reputation: 3686

Javascript class creation

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

Upvotes: 2

Views: 788

Answers (3)

zaphod1984
zaphod1984

Reputation: 856

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();

Upvotes: 1

Mörre
Mörre

Reputation: 5723

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.

Upvotes: 1

Andreas
Andreas

Reputation: 1622

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.

Upvotes: 1

Related Questions