Last active
May 4, 2016 13:37
-
-
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)…
This file contains hidden or 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 | |
| ///////////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