How to properly work _around_ Javascript persistence?

Question

There is basic persistence of Javascript vars/etc. You call a function/method, and the next time you call that same function/method, it is holding the data from the last time.

You can delete the vars when you are done with them, but that removes the advantage of using the code again for that instance.

So what is the proper way to write code which can be reused, on different elements, inside the same page.

Therefore, I need the ability to write code so that I can point it at several different elements, and then interact with that code segregated for each element.

So in PHP (as an example) I would do:

$element1 = new MyClass();
$element2 = new MyClass();
$element3 = new MyClass();

in that case it's the same code running in three segregated scopes. How can I do this properly with JS. Even using jQuery's extend() gives me problems.

Thanks.

Answer 1

To create an instance in JavaScript you need to write a constructor function, and call that using new. For instance:

function MyClass( somevalue ) {
   this.somevalue = somevalue;
   this.somefunction = function() {
     alert(somevalue);
   }
}

var instance1 = new MyClass(1);
var instance2 = new MyClass(2);
var instance3 = new MyClass(3);

Answer 2

Use the var keyword when defining local variables (otherwise they'll default to globals).

function foo() {
    var i;
    // code code code code
}

Answer 3

You can namespace your JavaScript to make it a lot like what you're after. See below for an example. It does sound like your problem is related to using global variables where you want to use local variables though - i.e. you declare var myvariable; outside of your function, but only want to use it and forget it within your function. In that case, declare the variable inside your function to make it local.

var MyNameSpace = function() {
    return {
        sayhello : function() {
            alert("hello");
        },
        saygoodbye : function() {
            alert("see ya");
        }
    };
}();

Answer 4

It sounds like what you're looking for is the ability to have instances of a class and have private data that's associated with each instance.

You can do this using the following technique:

function Foo()
{
    // Member variable only visible inside Foo()

    var myPrivateVar;       

    // Function only visible inside Foo()

    var myPrivateFunction = function() 
                            { 
                                alert("I'm private!");
                            }

    // Member variable visible to all

    this.myPublicVar = "Hi, I'm public!";

    // Function visible to all

    this.myPublicFunction = function()   
                            {
                                myPrivateVar = "I can set this here!";
                            }
}

You can create and use one of these using the following syntax:

var myFoo = new Foo();

myFoo.myPublicVar = "I can set this!";
myFoo.myPublicFunction();