First of all, I must tell you that i am not a specialist and you may find better (complete) answer on the subject.
Prototype
The big difference between the 3 ways are the prototype. The method 1 [Usin a function] will allow you to bind prototype object that are not shared among other object.
You can add prototype method the Apple object aswell as the Object object. See for example :
//init
Object.prototype.hello = 'Hello';
Apple.prototype.world = ' World';
//Method 1
alert(apple.hello + apple.world); //Hello World
//Method 2
alert(apple.hello + apple.world); //Helloundefined
//Method 3
alert(apple.hello + apple.world); //Helloundefined
Reutilisability
If you want multiple instance of the same object, you'll have a bad time without the first method. As in you example, if you want 2 different apple, you need to copy/paste and change properties (except for the first method).
//Method 1
var macintosh = new Apple('macintosh');
var otherApple = new Apple('Heisenberg')
//Method 2
var macintosh = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
var otherApple = {
type: "I'm not good with apple's name",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
//Method 3
var macintosh = new (function(type) {
this.type = type;
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
};
})('macintosh');
var otherApple = new (function(type) {
this.type = type;
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
};
})('Still not better');
Variable scope
In the method 1 and method 3, you can have local variable. Elements that are not accessible outside the object.
This is kinda useful when you have event handler function inside you object. In those function, you lose the this reference. Lucky, you can save it in a local variable. Take for example timeout and let not cheat with something like .bind():
//Method 2
var apple = {
getMe : 'YES!',
setTimer : function(){
setTimeout(this.goGetHim, 500);
},
goGetHim : function(){
//alert(this.getMe); Do not work
alert(apple.getMe); //Kinda lame
}
}
// Method 1, 3
yourinitfn(){
var self = this
this.getMe : 'YES!',
this.setTimer : function(){
setTimeout(this.goGetHim, 500);
},
this.goGetHim : function(){
alert(self.getMe); //YES!
}
}
apple.self;//Undefined
Identification
The last thing i could think of is the identification. Basicly, you can easily, with the method #1, know that the object is an apple :
//Method 1
alert(apple instanceof Object); //True
alert(apple instanceof Apple); //True
//Method 2
alert(apple instanceof Object); //True
alert(apple instanceof Apple); //False
//Method 2
alert(apple instanceof Object); //True
alert(apple instanceof Apple); //False
There must be other advantage
If someone could find other advantage on those subject, I would be gratefull :
- Memory
- Performance
- Readability
- Programming langage compatibility (ex.: Object to PHP via JSON)
- Other things i can't think of...
Last note
I've never used, and shall never use the singleton function to create an object. I've read somewhere (can't find the reference now) that using new function is a bad practice and a big performance hit. Note that I may be wrong here...
