Object Oriented Javascript – A prototype based language – a beginner’s notes

Here are some notes that I have discovered and would like to share with fellow beginners of OO JavaScript

Key Learnings : –
a. JavaScript’s support for OO is very different from that given by C++, Java
b. a JavaScript function is really an object with executable code associated with it. and hence every function in JavaScript gets a “this” operator which refers to itself

function displayQuote() {
    // the value of "this" will change; depends on
    // which object it is called through

var williamShakespeare = {
    "memorableQuote": "It is a wise father that knows his own child.",
    "sayIt" : displayQuote

var markTwain = {
    "memorableQuote": "Golf is a good walk spoiled.",
    "sayIt" : displayQuote

var oscarWilde = {
    "memorableQuote": "True friends stab you in the front."
    // we can call the function displayQuote
    // as a method of oscarWilde without assigning it
    // as oscarWilde’s method.
    //"sayIt" : displayQuote

williamShakespeare.sayIt(); // true, true
markTwain.sayIt(); // he didn’t know where to play golf

// watch this, each function has a method call()
// that allows the function to be called as a
// method of the object passed to call() as an
// argument.
// this line below is equivalent to assigning
// displayQuote to sayIt, and calling oscarWilde.sayIt().
displayQuote.call(oscarWilde); // ouch!

c. You declare and setup classes by setting up functions in their name
d. Every object in JavaScript is created as a copy of an existing example object, and every class definition, so to speak , has the keyword “prototype” associated with it giving us developers access to the prototype of the class that we are setting up.  “Any properties and methods of this prototype object will appear as properties and methods of the objects created from that prototype’s constructor. You can say that these objects inherit their properties and methods from their prototype. ”
e. Every “prototype” has a “constructor” property to it. and since the class declaration/definition itself is a function, this “constructor” property  simply refers back to this function. (some recursion this is).
f. “Every JavaScript object inherits a chain of prototypes, all of which terminate with Object.prototype, which is the ultimate base prototype for all prototypes. ”
g.JavaScript supports closures. “Closure” when crudely translated to simpler english means anonymous functions. And a more specific meaning would be “A closure is a runtime phenomenon that comes about when an inner function (or an inner anonymous method) is bound to the local variables of its outer function.”

Inheritance works this way – http://javascript.crockford.com/prototypal.html


About vatsalad

Hi, I'm Vatsala
This entry was posted in JavaScript and tagged , , . Bookmark the permalink.

One Response to Object Oriented Javascript – A prototype based language – a beginner’s notes

  1. Couple of comments:

    ‘JavaScript gets a “this” operator which refers to itself’ – not technically correct, your examples show that you have an understanding of how the “this” keyword operates but your examples aren’t in line with this statement. The “this” keyword does *NOT* refer to the function itself, but rather the object in scope at the point of execution. This is profoundly different. Especially when you consider that *every* function can act as a constructor when called with the “new” modifier (even the one in your example. It will create an object and immediately alert “undefined” since there will be no “memorableQuote” property of the newly created object). Additionally, it’s important to realize that “this” is in the window scope for normally executed code, so in your example if at any point you declare (without var scoping) memorableQutoe as equal to something, you’ve made a memborableQuote property of window and therefore can call displayQuote() and receive the message resulting from the scope of “this” relating to the window object.

    re: “You declare and setup classes by setting up functions in their name” – not sure exactly what you’re saying here, but there’s a couple of ways to look at classes in JS. The main (and most common) way is to recognize that there is no (current) language support for Class based inheritance. But (and this is a significant point), Class base inheritance can be simulated (There are a multitude of resources out there for ways to go about it – almost every major library has a method for this (jQuery being a notable exception)). However, most (if not all) of the methods that simulate Class inheritance, obscure the way JS really works and I recommend grokking that first off:
    – as stated in the first comment above, *every* function can act as a constructor – i.e., when called with the “new” modifier, it will return a newly created object, unless an explicit return (of either an existing object, or a primitive) is given from the function. “constructor” being the important word here, since:
    – every object inherits from the prototype of it’s constructor. – that’s it. That’s the extent of JS inheritance. But yes, as you state, that *is* a chain, since the prototype of the constructor, is itself an object, which therefore inherits from the prototype of *it’s* constructor. And so on.
    – any constructor has only one prototype. All of the objects it constructs inherit from that one prototype object. Therefore all properties of that prototype are SHARED by every instance. Extremely important point.
    function Foo(){
    return this;
    Foo.prototype.cow = “moo”;

    var foo1 = new Foo(), foo2 = new Foo();
    console.log( foo1.cow ); //-> “moo”
    foo1.cow = “bark”;
    console.log( foo2.cow); //-> “bark” – but wait! we didn’t modify foo2!

    This is where the importance of “this” comes into play:
    function Foo(){
    this.sound = “moo”
    Foo.prototype.say = function(){
    return this.sound;
    Foo.prototype.changeVoice = function( newSound ){
    this.sound = newSound;

    var foo1 = new Foo(), foo2 = new Foo();
    console.log( foo1.say() ); // -> “moo”;
    foo1.changeVoice( “bark” );
    console.log( foo2.say() ); // -> “moo”; Yay! That’s more like it.

    Hope that helps!

Comments are closed.