I’m going to try to explain (to myself and some stumbling web surfer) the constructor pattern in Javascript.

Javascript objects inherit properties directly from other objects, and all the way back to the builtin Objects’ prototype. If we create an object by invoking functions, their this keyword is bound to the object whose method created it. Also, all inner properties, and the closure scope will be shared.
Tipically it’s done this way:

var myObject = {
prop: 0, // defaults to 0
add: function (x) {
this.prop += x;
}
};

var otherObj = myObject;
myObject.add(2);
console.log(myObject.prop); // 2
otherObj.add(3);
console.log(otherObj.prop); // 5

So, all objects’ this keyword is bound to that one object.

If we want separate multiple objects, we use the constructor pattern. By convention, we name the constructor functions with a capitalized names.
Here is an example:

// “class” definition
var MyClass = function () {
this.prop = 0;
};

// lets add a getter method
MyClass.prototype.add = function (param) {
this.prop += param;
};

var myInstance = new MyClass();
var otherInstance = new MyClass();

myInstance.add(2);
otherInstance.add(3);

console.log(myInstance.prop); // 2
console.log(otherInstance.prop); // 3

 

When we invoke the object with the new pattern, its this keyword is bound to that object, so every object gets its own closure space.

P.S. I’ve ran into an interesting question on StackOverflow in this comment, so I made a post to try to answer it.

I’m new to Yii php framework and I’m fiddling about it. I created a database and a date column in it, and pregenerated (with Gii – recommending this!) the controller and views for it.

However, the Create/Update forms made my input field for the date a text field.

So here is a quick recipe on how to use CJUIDatePicker widget (jQuery UI DatePicker object) for it:

1) Open the _form.php file in the view for your desired class. For me, it was in protected/views/guest/.

2) Find your row. My gii-generated form had columns in div’s and each div (each column) had three rows:

<div class="row">
 <?php echo $form->labelEx($model,'created'); ?>
 <?php echo $form->textField($model,'created'); ?>
 <?php echo $form->error($model,'created'); ?>
 </div>

3) Remove the middle row and replace it with the widget you want:

$this->widget('zii.widgets.jui.CJuiDatePicker', array(
// 'name'=>'birthdate',
 'name'=>"Guest[created]", // the name of the field
 'value'=>$model->created,  // pre-fill the value
 // additional javascript options for the date picker plugin
 'options'=>array(
 'showAnim'=>'fold',
 'dateFormat'=>'yy-mm-dd',  // optional Date formatting
 'debug'=>true,

),
 'htmlOptions'=>array(
 'style'=>'height:20px;'
 ),
 ));

There, that worked for me, and I’ll update this post when I run into bugs.

In writing my programs with JavaScript, I never really completely understood the closure idea. I still think I don’t, but here is how I will try to explain it to myself. The idea and code used is from one of the Youtube videos of Douglas Crockfords ‘the good parts’.

We can start with a simple example. We want to turn digits into strings, something like this:

var names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'ate', 'nine' ];
function  digit_name(n) {
return names[n];
}
digit_name(4); // returns ‘four’.

This code will run ok, but it has a problem: the names array is global. Any other JavaScript on the page can break our code by writing over our “names” variable.

So we could do this:

function  digit_name(n) {
var names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'ate', 'nine' ];  // this is now private to our function
return names[n];
}
digit_name(4); // returns ‘four’.

This code is better – we have a self-sufficient function, without polluting global namespace. But now, every time we call the function, we re-initialize our names array.

How to avoid it? Here is an example:

var digit_name = function () {
var names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'ate', 'nine' ];
return function (n) {
return names[n];
}
}

This is now much better. What happens on executing? First, a private array is initialized and stored to memory. Then we return a function that will look up our names array and find the result.

Wait, what?

Well – the array is initialized and left in memory. And each time somebody calls our returned function from digit_name(n), that returned function will look up into the now-enclosured (in lack of better term) array.
It means that our later function call doesn’t execute digit_name – it only executes the anonymous function we returned. And that function has access to our private variable.
So the anonymous inner function will execute when needed, but our array is only initialized once (and held in a closure).

So the module pattern for creating stuff in closures should be something like this:

var singleton = function () {
var privateVariable; // only created once
function privateFunction() {  // only created once
…
};
return {
methodOne: function (param) { // this is exported out once.
// so when we call singleton.methodOne(param)
// later, the private stuff above is already there and
// within closure
},
methodTwo: function(a, b) { // another public method
….
},
publicInt: 10
};
}

// now calling and instantiating the object will have the object being created, private vars and methods left there, and public stuff exposed to us.

I think I got it right, hopefully this will help me (and possibly others) in the future.