Different OO JavaScipt approaches: please advise

[448191]

Functionally the same. Looking for arguments to prefer one over another.

 

function Bar1(){

var privateFoo = 'foo';

var privateFooMethod = function(){
	return privateFoo;
}
this.publicFoo = privateFooMethod();

this.publicFooMethod = function() {
	alert(privateFoo);
}
}
function Bar2(){

var privateFoo = 'foo';

var privateFooMethod = function(){
	return privateFoo;
}

return {
	publicFoo: privateFooMethod(),
	publicFooMethod: function() {
		alert(privateFoo);
	}
}
}

[fenway]

The first one reads so much better.

[448191]

Which is how I've been doing it up till now. The guys at ExtJS seem to prefer the second method though, just trying to find out if there is more to it than preference.

[fenway]

Also, there's an unnecessary level of indentation.

[emehrkay]

While they are similiar, your Bar2 returns an Object literal. It is easier to pass around the "this" keyword in Object Literals and you dont have to preface your "public" methods and properties with "this."

 

these are almost the same

 

var x = {

y: 'this is y',

z: function(){

console.log('this iz the z function');

}

};

 

function x(){

this.y = 'this is y';

this.z = function(){

console.log('this iz the z function');

};

}

 

The only difference, the biggest one, is that functions can be instantiated over and over again, but object literals are easier to work with. the extjs is a best of both worlds usage

[emehrkay]

I havent tested, but by looking at bar2, it looks like that creates more of a typical oo environment. I would assume that it is the same or similar to :

 

 

class bar2{

private $_foo;

private function manipulteFoo($val){

$this->_foo = $val;

}

public function changeFoo($val){

return $this->manipulateFoo($val);

}

public function getFoo(){

return $this->_foo;

}

}

[448191]

I overlooked that difference.

 

It may be flexible to use object literals, it also makes it impossible to do any type checking. Try this in the Firebug console:

 

function Bar1(){

var privateFoo = 'foo';

var privateFooMethod = function(){
	return privateFoo;
}
this.publicFoo = privateFooMethod();

this.publicFooMethod = function() {
	alert(privateFoo);
}
}
function Bar2(){

var privateFoo = 'foo';

var privateFooMethod = function(){
	return privateFoo;
}

return {
	publicFoo: privateFooMethod(),
	publicFooMethod: function() {
		alert(privateFoo);
	}
}
}
document.write('<pre>');
document.write((new Bar1).constructor);
document.write('</pre>');
document.write('<pre>');
document.write((new Bar2).constructor);
document.write('</pre>');

 

function Bar1() {

    var privateFoo = "foo";

    var privateFooMethod = function () {return privateFoo;};

    this.publicFoo = privateFooMethod();

    this.publicFooMethod = function () {alert(privateFoo);};

}

 

function Object() {

    [native code]

}

 

It makes a little more sense now. Thanks.