Skip to content

Instantly share code, notes, and snippets.

@krazylearner
Last active May 4, 2016 13:37
Show Gist options
  • Select an option

  • Save krazylearner/d5d531574243b85f0c3e7fdc18258ab6 to your computer and use it in GitHub Desktop.

Select an option

Save krazylearner/d5d531574243b85f0c3e7fdc18258ab6 to your computer and use it in GitHub Desktop.
In the example above you see that the method getInfo() of the Apple "class" was defined in a separate function getAppleInfo(). While this works fine, it has one drawback – you may end up defining a lot of these functions and they are all in the "global namespece". This means you may have naming conflicts if you (or another library you are using)…
//1
///////////Antipattern///////////
function Apple (type) {
this.type = type;
this.color = "red";
// anti-pattern!
this.getInfo = getAppleInfo;
}
// anti-pattern!
function getAppleInfo() {
return this.color + ' ' + this.type + ' apple';
}
//////////////correct pattern ////////////////
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
}
//2
///////////////////Antipattern///////////
function getData() {
}
//////////////correct pattern ////////////////
/* Benefits:
* 1. Makes it easier to understand "functions as an object".
* 2. It enforces good semicolon habits.
* 3. Doesn't have much of the baggage traditionally associated with functions and scope.
*/
var getData = function () {
};
//3
///////////////////Antipattern///////////
// using literals as opposed to the Object constructor is that there
// is no scope resolution
var car = new Object();
car.goes = 'far';
//////////////correct pattern ////////////////
var car = {
goes : "far"
};
//4
///////////////////Antipattern///////////
// NOTE: calling a constructor without new will have unforseeing consequences
// this will pointing to global object instead
function MyConstructor() {
this.thing = "constructor";
}
var first = new MyConstructor();
var second = MyConstructor();
console.log(first.thing);
console.log(second.thing);
//////////////correct pattern ////////////////
// Code showing how to force calling new when invoking a constructor
function MyConstructor() {
if (!(this instanceof MyConstructor)) {
return new MyConstructor();
}
this.thing = "constructor";
}
var first = new MyConstructor();
var second = MyConstructor();
console.log(first.thing);
console.log(second.thing);
//5
///////////////////Antipattern///////////
// for-in loops
// the object
var man = {
hands: 2,
legs: 2,
heads: 1
};
// somewhere else in the code
// a method was added to all objects
if (typeof Object.prototype.clone === 'undefined') {
Object.prototype.clone = function () {};
}
// antipattern
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, ":", man[i]);
}
/*
* result in the console
* hands : 2
* legs : 2
* heads : 1
* clone: function()
*/
///////////////////correct pattern///////////
// preferred 1
// the object
var man = {
hands: 2,
legs: 2,
heads: 1
};
// somewhere else in the code
// a method was added to all objects
if (typeof Object.prototype.clone === 'undefined') {
Object.prototype.clone = function () {};
}
for (var i in man) {
if (man.hasOwnProperty(i)) { // filter
console.log(i, ":", man[i]);
}
}
/*
* result in the console
* hands : 2
* legs : 2
* heads : 1
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment