

OO JS in 15mins or Less  - mdgrech23
http://beardedocto.tumblr.com/post/21920818233/oo-js-in-15mins-or-less

======
SideburnsOfDoom
The text is quite misleading. Where it says "When using Object literals, if we
copy an object and change a property or a method that method/property will be
changed for all instances."

And in the code, there is only one instance. No copying has taken place, but
there are two references to the same object.

~~~
mdgrech23
Agreed. I could see how that line could be confusing. Why don't we change it
for the better in that case? How about something like this:

In the example above we create a new variable sally, and assign it the value
bill. Both sally and bill reference the same spot in memory. As such we can't
change bill out w/ out changing Sally, specifically when a change is made to
an object literal it will affect that object across the entire script.

~~~
SideburnsOfDoom
Something like that would be right.

How about: In the example above we create a new variable sally, and _make it
equal to_ bill. Both sally and bill now reference the same _object in memory_.
Changes made via one affect both of them.

~~~
mdgrech23
Awesome, you rock! Officially updated the post w/ the above :)

------
sarenji
A small nit:

 _Specifically the sayName function was created in the global scope, so when
it came across the statement this.name it looks in the global scope for the
value of name._

It doesn't matter where a function is created, but it matters how it's called.
A pretty simple example is that typing sayHello() by itself desugars to
sayHello.call(window);, where window is the global scope[1]. JavaScript
function invocation is fairly confusing until you learn the rules.

I also really liked Yehuda's JS prototypes article[2]. It really helped me
understand them.

[1]: Except in JS strict mode apparently? I don't know too much about that.
See [http://yehudakatz.com/2011/08/11/understanding-javascript-
fu...](http://yehudakatz.com/2011/08/11/understanding-javascript-function-
invocation-and-this/)

[2]: [http://yehudakatz.com/2011/08/12/understanding-prototypes-
in...](http://yehudakatz.com/2011/08/12/understanding-prototypes-in-
javascript/)

------
aurelianito
A few days ago this guide appeared here in Hacker News:
<http://www.gabordemooij.com/articles/jsoop.html>

I think that it is far better than this article.

~~~
shadowmint
yes. quote: "Note that we did not use a lot of confusing JS stuff: no this, no
new, no prototype. Therefore this approach is not only easy, minimalist and
elegant but it also works in the most ancient and exotic browsers."

This is the correct approach.

...not because those operators are bad, but because they _are_ confusing, and
will confuse some people who work on the code base. Simple javascript is
elegant and maintainable.

------
mcmire
This is okay, but you talk about "cloning" objects by giving them a different
variable name, then you talk about constructors, and then you VERY briefly
mention the "prototype" property -- which is actually the secret behind it
all.

I feel like in any overview of JavaScript you HAVE to mention two things: 1)
constructors aren't classes, they're non-magical functions (it's the "new"
keyword that actually does the magic) and 2) inheritance works through a
prototype chain, not through a class chain. Once you understand these two
things (which will blow your mind) the rest is easy. (EDIT: okay, then there
what "this" does in different contexts, but that's details)

This article is pretty elucidating:
[http://livingmachines.net/2009/02/creating-javascript-
classe...](http://livingmachines.net/2009/02/creating-javascript-classes-
part-1-with-screencast/)

------
jarek-foksa
This is yet another article on JS OOP that jumps straight to constructors
without explaining the fundamental concepts of prototypical inheritance.

Please take your time to understand how things really work, it will pay off in
the future. A good starting point is
[http://killdream.github.com/blog/2011/10/understanding-
javas...](http://killdream.github.com/blog/2011/10/understanding-javascript-
oop/)

------
jseims
An OO JS tutorial should also include a discussion of the _this_ pointer, and
how it's _not_ like other OO languages.

In JS, _this_ reflects the context of the _caller_ , not the _object_ (which I
think is messed up), so you have to learn _call_ and _apply_.

~~~
mdgrech23
My first thought here was holy cow yes it should! My second though was ack,
there's a lot to go over. Sounds like a good topic to cover in a second post.
However if you see a way to nicely integrate into the current post in brevity
I'm all ears and would be happy to update the post :) Thanks!

------
jmaicher
There is no _zelda.prototype_. It should have been:

    
    
      Game.prototype.heartIt = function() { 
        console.log( "I heart " + this.title ); 
      };
    

See: <http://jsfiddle.net/a9asJ/1/>

~~~
mdgrech23
Thank you, corrected!

------
president
"Constructor notation is preferred when you need to set initial properties and
methods on an object or you plan on creating multiple instances of an object
where the properties and methods of each instance need to be unique."

Love it when they don't just tell you how to do something. Would like to see
more people write on when you should use something.

~~~
recursive
> Love it when they don't just tell you how to do something.

Or why. None of the examples seem like constructors provide any advantage over
literals.

~~~
ww520
So that the methods don't need to be re-defined for every object.

~~~
recursive
Object literals don't require you to duplicate any code:

    
    
        function getObject(val1, val2) {
            return {
                foo: val1,
                bar: function() {
                    return val2;
                }
            };
        }

~~~
stephenr
In this instance the "bar" method is redefined every time you call getObject.

------
joubert
Folks might also be interested in this article on implementing other common
design patterns in JavaScript －
[http://addyosmani.com/resources/essentialjsdesignpatterns/bo...](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)

~~~
loeschg
Thanks, I found this section from Addy on constructors helpful as well (to
clear up some prototype confusion).
[http://addyosmani.com/resources/essentialjsdesignpatterns/bo...](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript)

------
ww520
This is a very good intro to JS OO. Keep up the good work.

~~~
mdgrech23
Thank you! I cleaned up the issues noted here and in the comments. I'd like to
create another post on inheritance or digging into prototype as well :)

------
VMG
small correction:

    
    
       bill.sound = function(noise) { 
           console.log( sound );  // should be console.log(noise)
       }

~~~
mdgrech23
Good call, I just updated it. Thanks!

------
edfuh
What about inheritance?

------
base698
(> fn OO)

~~~
olliesaunders
I think you mean FP. And I agree with you.

