Last active
November 17, 2016 23:23
-
-
Save remainstheday/9578330 to your computer and use it in GitHub Desktop.
The 3 ways to declare objects in javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 1. USING A FUNCTION | |
* notes: this is not the best solution for | |
* large applications, because your constructor | |
* functions are global objects and could accidentally | |
* be overwritten. | |
*/ | |
// create a Class Apple | |
function Apple(type){ | |
this.type = type; | |
this.color = 'red'; | |
this.getInfo = getAppleInfo; | |
} | |
// constructor function for the Apple Class | |
function getAppleInfo (){ | |
return this.color + ' ' + this.type + ' ' + 'apple'; | |
} | |
// object instance of Apple Class | |
var apple = new Apple('macintosh'); | |
apple.color = 'reddish'; | |
console.log(apple.getInfo()); | |
console.log(apple); | |
/* | |
* 1.1 METHODS DEFINED INTERNALLY | |
* notes: using this solution prevents global | |
* overwrites without changing the way you | |
* instantiate an object of Class Apple. | |
* But method getInfo is recreated with each instance. | |
*/ | |
function Apple(type){ | |
this.type = type; | |
this.color = 'red'; | |
this.getInfo = function(){ | |
return this.color + ' ' + this.type + ' ' + 'apple'; | |
}; | |
} | |
// object instance of Apple Class | |
var apple = new Apple('macintosh'); | |
apple.color = 'reddish'; | |
console.log(apple.getInfo()); | |
console.log(apple); | |
/* | |
* 1.2 METHODS ADDED TO THE PROTOTYPE | |
* notes: A more inexpensive way of adding | |
* to the prototype of the constructor function | |
* if you don't want the constructor to be | |
* recreated with each instance. | |
*/ | |
function Apple(type){ | |
this.type = type; | |
this.color = 'red'; | |
} | |
Apple.prototype.getInfo = function(){ | |
return this.color + ' ' + this.type + ' ' + 'apple'; | |
}; | |
// object instance of Apple Class | |
var apple = new Apple('macintosh'); | |
apple.color = 'reddish'; | |
console.log(apple.getInfo()); | |
console.log(apple); | |
/* | |
* 2. USING OBJECT LITERALS | |
* example of literal notation: var o = {}; | |
* example of regular notation: var o = new Object(); | |
* notes: in this case you don't need to (and cannot) create an | |
* instance of the class, it already exists. So you simply | |
* start using this instance. Such an object is sometimes | |
* called a singleton. | |
*/ | |
var apple = { | |
type: 'macintosh', | |
color: 'red', | |
getInfo: function () { | |
return this.color + ' ' + this.type + ' ' + 'apple'; | |
} | |
} | |
apple.color: 'reddish'; | |
console.log (apple.getInfo()); | |
/* | |
* 3. SINGLETON USING A FUNCTION | |
* notes: the "= new function(){}" does two | |
* things at the same time: define a | |
* function (an anonymous constructor function) | |
* and invoke it with new. | |
*/ | |
var apple = new function(){ | |
this.type = 'macintosh'; | |
this.color = 'red'; | |
this.getInfo = function(){ | |
return this.color + ' ' this.type + ' ' + 'apple'; | |
} | |
} | |
apple.color = 'reddish'; | |
console.log (apple.getInfo()); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment