3

I have what I think is a fairly simply question but it's one that I can not find the answer to. I have a objects literal that I have created that groups functions, I want to know how I can create a variable that is inside the objects literal and editable/accessable by all the functions within that objects literal. At the moment the only way I know how to do this is create a global variable but I want to stop populating the global in this way. To better describe what I'm looking fiddle

http://jsfiddle.net/aT3J6/

Thanks, for any help.

var clickCount = 0;

/* I would like to place clickCount inside hideShowFn Object but all function inside need access to it, so global within hideShowFn */

hideShowFn = {
    init:function(){  
     $('.clickMe').click(this.addToCount);                
    },

addToCount:function(){
    clickCount++;
    $('<p>'+ clickCount + '</p>').appendTo('body');
    }
}

hideShowFn.init();
Improve this question
2
  • Can you wrap all that code in a function? Commented Aug 13, 2012 at 21:20
  • 3
    If you wrap all the code inside of a closure (function() { ... })(); it will keep the global scope clean. Commented Aug 13, 2012 at 21:21

3 Answers 3

Reset to default
2

Create a function which is invoked immediately and returns the object, with the private variable inside the function, like this:

var obj = (function () {
    var privateStuff = 'private';
    return {
        func1: function () { 
            //do stuff with private variable
        },
        func2: function () {
            //do stuff with private variable
        }
    };
}());

http://jsfiddle.net/BE3WZ/

This is the way to have private variables in Functional Programming.

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

2 Comments

Thanks, but I'm still confused about how this would works. I would be very grateful if you could work it back into the fiddle???
I've edited my answer, explaining my method a bit and giving a link to a jsfiddle example.
2

http://jsfiddle.net/mattblancarte/aT3J6/10/

Another option would be the pseudo-classical style:

function Constructor(){
  var private = 'private';
  this.public = 'public';

  this.methods = {
    //your methods here...
  };
}

var obj = new Constructor();

Don't forget to use the 'new' keyword, or else you are going to be globally scoped.

Your code translated to this style would be:

function Test(){
  var that = this,
      clickCount = 0;

  this.init = function(){
    $('.clickMe').click(this.addToCount);
  };

  this.addToCount = function(){
    clickCount++;
    $('<p>'+ clickCount + '</p>').appendTo('body');
  };
}

var test = new Test();
test.init();
Improve this answer

2 Comments

Why would he need a constructor to make this object? He obviously needs only one copy of it...
I'm not making any assumptions either way. OP was curious about how to control scope. My answer shows another way to do so.
1

You can make a closure as Cokegod says or you can simply add the variable to the object and access it using this

hideShowFn = {
    clickCount: 0,
    init:function(){  
        $('.clickMe').click(this.addToCount);                
    },
    addToCount:function(){
        this.clickCount++;
        $('<p>'+ this.clickCount + '</p>').appendTo('body');
    }
}

hideShowFn.init();

This dosn't work as Musa says the scope in addToCount will be the dom node clicked.

But see Cokegod's answer.

Improve this answer

2 Comments

When addToCount is called as a click handler this will refer to the .clickMe element and not the object hideShowFn
You'll have to call the original namespace in the click function hideShowFn.clickCount ..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.