Inside Javascript Objects

Outline

1. Objects
2. Functions
3. Prototype
4. The new operator
5. The instanceof operator
6. Implementing Classical Inheritance

Objects

A simple object.

p = {x: 1, y: 2};
a = p.x; // 1
b = p.y; // 2

p.z = p.x + p.y; // 3

Functions

function square(x) { 
    return x*x; 
}
square(4); // returns 16

var sq = square;
sq(4); // returns 16

square.x = 1;

What is "this"?

The body of the function has access to two magic variables: this and arguments.

The value of this variable depends on how the function is called.

• f() -> this = top-level-object
• a.f() -> this = a

What is "this"?

The function object has an apply method. Calling f(2) is equivalent to calling:

f.apply(null, [2]);

And calling a.f(2) is equivalent to calling:

f.apply(a, [2]);

What is "this"?

function square_me() {
    return this.value * this.value;
}

var n = {"value": 2};
n.square = square_me;

n.square(); // returns 4
square_me.apply(n, []); // returns 4

The arguments variable

The special variable arguments contains the list of arguments passed to the function.

function count() {
    return arguments.length;
}

count();        // 0
count(1, 2, 3); // 3
count(4, 5);    // 2

The new operator

function Point(x, y) {
    this.x = x;
    this.y = y;
}
var p = new Point(3, 4);    

p.x; // 3
p.y; // 4

The prototype object

function Point(x, y) {
    this.x = x;
    this.y = y;
}
var p = new Point(3, 4);    
Point.prototype.name = "Point"; // Adding a name property to prototype
p.name; // returns "Point"

p.name = "p";
Point.prototype.name; // will still be "Point"

Point.prototype.magnitude = function() {
    return Math.sqrt(this.x*this.x + this.y*this.y);
}
p.magnitude(); // returns 5

The prototype object

function F() {}
F.prototype.x = 1;

var f1 = new F();
f1.x; // 1

// Changing the function prototype here!
F.prototype = {"x": 2}; 
var f2 = new F();

f2.x; // 2

// What happen to previously created objects when prototype changes?
f1.x; // ??

__proto__

p.__proto__ == Point.prototype; // true

p.__proto__ = {
    "name": "foo",
};

p.name; // "foo"

The prototype object

p1                          p2
+-----------+         +-----------+
| x         |-> 1     | x         |---> 5
+-----------+         +-----------+         
| y         |-> 2     | y         |---> 6   
+-----------+         +-----------+         
| __proto__ |----+  +-| __proto__ |
+-----------+    |  | +-----------+         
                 |  |                            
                 |  |
                 v  v 
             Point.prototype                      
             +--------------+                     
             | name         | --> "Point"         
             +--------------+
             | magnitude    | --> function() {...}
             +--------------+                     

How to implement the new operator?

function new_operator(func, args) {
    var obj = {};
    obj.__proto__ = func.prototype;
    func.apply(obj, args);
    return obj;
}

var p1 = new_operator(Point, [1, 2]);
p1 instanceof Point; // true
p1.x; // 1
p1.y; // 2

How does it work?

function new_operator(func, args) {
    var obj = {};
    obj.__proto__ = func.prototype;
    func.apply(obj, args);
    return obj;
}

var p1 = new_operator(Point, [1, 2]);

obj           
+-----------+ 
|           |
+-----------+ 

obj            +> Point.prototype
+-----------+  | +---------------+
| __proto__ |--+ |      ....     |
+-----------+    +---------------+

obj              +> Point.prototype
+-----------+    |  +-------------+
| x         |->1 |  |      ....   |
+-----------+    |  +-------------+
| y         |->2 |
+-----------+    |
| __proto__ |----+
+-----------+     

The Prototype Chain

function F() {
    this.f = "F";
}
function G() {
    this.g = "G";
}
G.prototype.h = "H";

// Here is the magic. Prototype of F is an instance of G.
F.prototype = new G(); 

x = new F();
x.h; // ??

The Prototype Chain

 x                 +> F.prototype       +> G.prototype
+-----------+      | +-----------+      | +-----------+        
| f         |->"F" | | g         |->"G" | | h         |-> "H" 
+-----------+      | +-----------+      | +-----------+        
| __proto__ |------+ | __proto__ |------+ | __proto__ |-> ...
+-----------+        +-----------+        +-----------+        

The instanceof operator

var p = new Point(3, 4);
p instanceof Point; // true
p instanceof Object; // true

The instanceof operator

function F() {}
function G() {}

f = new F();
f instanceof F; // true
f instanceof G; // false

G.prototype = F.prototype; 
f instanceof G; // true
f instanceof F; // true

Implementing the instanceof operator

function  my_instanceof(object, constructor) {
    if (object === Object.prototype)
        return false;
    return (object.__proto__ === constructor.prototype 
        || my_instanceof(object.__proto__, constructor));
}    

Implementing the instanceof operator

my_instanceof(1, Number);   // true
my_instanceof(1, Object);   // true

1 instanceof Number;    // false
1 instanceof Object;    // false

Implementing Classical Inheritance

Now lets try to create classes similar to the traditional programming languages like Java and Ruby. We should build the following:

• A simple way to declare a class.

  var Animal = Class({
      init: function(name) {
          this.name = name;
      },
      eat: function() {
          return this.name + " is eating";
      }
  });
  var a = new Animal("dog");
  a.eat();    // "dog is eating"
  

Implementing Classical Inheritance

• And a way to define another class by extending a base class.

  var Bird = Animal.extend({
      fly: function() {
          return this.name + " is flying";
      }
  });
  var b = new Bird("sparrow");
  b.fly();    // sparrow is flying
  b.eat();    // sparrow is eating 
  

Classical Inheritance - First Attempt

// Version 1 of Class implementation.
function Class(members) {
    var F = function() {
        if (members.init) {
            members.init.apply(this, arguments);
        }
    };
    F.prototype = members;
    return F;
}

Classical Inheritance (Continued...)

OK. We've solved the first part. What about the inheritance?

Lets borrow some ideas from Douglas Crockford.

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

How does it work?

y = object(x);
    
 y                x
+-----------+    +-----+
| __proto__ |--->| ... |
+-----------+    +-----+

z = object(y);

 z                y                x
+-----------+    +-----------+    +-----+
| __proto__ |--->| __proto__ |--->| ... |
+-----------+    +-----------+    +-----+

Classical Inheritance - Second Attempt

// Version 2 of Class implementation
function Class(members) {
    var F = function() {
        if (members.init) {
            members.init.apply(this, arguments);
        }
    };
    F.prototype = members;

    F.extend = function(members) {
        // Creating new object using the prototype of F
        var new_members = object(F.prototype);

        // and adding members to it.
        for (var name in members) {
            new_members[name] = members[name];
        }
        return Class(new_members);
    };

    return F;
}    

Classical Inheritance - Second Attempt

var Bird = Animal.extend({
    fly: function() {
        return this.name + " is flying";
    }
});

 Bird.prototype  +--> Animal.prototype
+-----------+    |   +----------------+
| fly       |    |   |      ...       |
+-----------+    |   +----------------+
| __proto__ |----+   
+-----------+                             

Classical Inheritance - Second Attempt

var b = new Bird("sparrow");
    
b                +--> Bird.prototype  +--> Animal.prototype 
+-----------+    |   +-----------+    |   +---------------+
| name      |    |   | fly       |    |   |      ...      |
+-----------+    |   +-----------+    |   +---------------+
| __proto__ |----+   | __proto__ |----+   
+-----------+        +-----------+

Want to learn more?

• Prototypal Inheritance in JavaScript - Douglas Crockford
• Simple JavaScript Inheritance - John Resig
• JavaScript parasitic inheritance, power constructors and instanceof.

Questions?