No site found for codelikethis.herokuapp.com; using CodeLikeThis content.


 Slides

OOJS: Prototypes

(this lesson is very technical; inheritance is a better place to start)

Prototypes

  • Every JS object has a prototype
  • If a property lookup ("." or "[]") fails, then JS looks in the object's prototype also
    • recursively up the "prototype chain"
    • until you find a property with the right name, or you reach Object.prototype
  • Prototypes work on all properties, not just functions

Example:


var mammal = {lactates: true, legs: 4};

var bat = Object.create(mammal);
bat.legs = 2;
bat.legs;     // 2
bat.lactates; // true

var horse = Object.create(mammal);
horse.legs;     // 4
horse.lactates; // true

octohorse = Object.create(horse);
octohorse.legs = 8;
octohorse.legs  // 8
  • Side note: Object.create was recently added to the JS spec and may not be present in all browsers. You can implement it like this:

if (!Object.create) {
    (function() {
        function F() {}
        Object.create = function(parent) {
            F.prototype = parent;
            return new F();
        };
    }());
}

Names and Types

  • By convention, constructors are capitalized, and represent a type name (or class name)
  • You can use instanceof to check an object's type

    circle instanceof Circle  // true
    circle instanceof Object  // also true
    
    • note: no parens required

Using prototypes to extend core objects

  • Remember, every object has a prototype, which is usually a pointer to a shared prototype defined on the constructor
  • So if you add a property to these shared prototypes, it magically appears on all objects of that type
  • Example: Array.sum -- adds all elements of an array together
Array.prototype.sum = function() {
    var total = 0;
    for (var i=0; i<this.length; ++i) {
        total += this[i];
    }
    return total;
};
[1,2,3].sum()  // 6

Q: what is "this" in the above code?

  • Example: String.reverse
String.prototype.reverse = function() {
    return this.split('').reverse().join('');
}
"abc".reverse() // returns "cba"

Q: What object is actually doing the reversing?

apply Yourself

  • apply is a function that calls a function
  • apply allows you to dynamically set this and arguments
  • apply is called on the function itself using "."
var add = function(x,y) { return x+y; }
add.apply(null, [2, 3]); // returns 5

var square = function() { return this.value * this.value; }
var x = {value: 10}
square.apply(x);  // returns 100
var y = {value: 20}
square.apply(y);  // returns 400

var increaseBy = function(amount) { return this.value + amount; }
increaseBy.apply(x, [4]); // returns 14
increaseBy.apply(y, [5]); // returns 25