JS Types and Inheritance

Whoami

Julia Poladsky

@julia_allyce

Javascript Developer @ Bitovi

Bitovi specializes in building javascript applications. We maintain several open source libraries: CanJS, StealJS, and JQuery++... We are Hiring!

I like ponies.

Dynamic Weakly Typed

Language

What are types?

Classification for kinds of data

What can be stored

What can be done with the stored data

Strong

Weak

var a int
var b string

func main () {
    a = 4
    b = "5"

    a += 2
    // add 2 to a, a == 6

    print( a + b )
    // Error!!
    // a and b are different types
}

var a = 4;
var b = "5";

a += 2
// add 2 to a, a == 6

console.log( a + b )
// JS returns the string "65"
// PHP/Perl returns 11

Predictable

Consistant

Inconsistant

More Flexible

Javascript Types

Primative

Boolean

   true; false       

Null

   null       

Undefined

   undefined     

Number

   -2^53-1 to 2^53-1; NaN; +/-Infinity   

String

   a series of characters

Primitives are immutable

var a = "Hello World";

var b = a.substring(0,5);

console.log(a); // "Hello World"
console.log(b); // "Hello"

OBJECTS!!!!

A mapping of keys and values, where values can be any type.

a = {‘x’: 4, ‘y’: ‘yo’}

a.x // 4

a['x'] // 4

a.y // 'yo'

Arrays are Objects!

a = [ 4, 'yo' ];

a[0] // 4

a[1] // 'yo'

Functions are Objects!!

a = function () {  

    return "hai";

};

a.y = 5; // tots legit 

a(); // "hai"

Let's talk about inheritance.

        No, Prototypal Inheritance

JS' Prototype Chain

var a = {};
// {} --> Object Prototype --> null

var b = [];
// [] --> Array Prototype --> Object Prototype --> null

var c = function () {...};
// function(){...} --> Function Prototype --> Object Prototype --> null

Simple Inheritance

var Horse = function (name, color) {
    this.name = name;
    this.color = color;
}

Horse.prototype.legs = 4;
Horse.prototype.age = 1;

var fleet = new Horse('Fleet Mistress', 'black');
// Horse { name: "Fleet Mistress", color: 'black' }

fleet.name; // "Fleet Mistress"
fleet.legs; // 4
fleet.age; // 1

Climbing the Prototype Chain

fleet.legs;
// fleet.legs == undefined --> Horse.legs == 4

fleet.age;
// fleet.age == undefined --> Horse.age == 1

fleet.rainbow;
// fleet.rainbow == undefined --> Horse.rainbow == undefined -->
// Object.rainbow == undefined --> null
// returns undefined


fleet.hasOwnProperty('age'); // false
fleet.hasOwnProperty('rainbow'); // false
fleet.hasOwnProperty('name'); // true

fleet.age = 10;
fleet.hasOwnProperty('age'); // true

Accessing Prototypes

// Depreciated :(
fleet.__proto__;
// Horse { legs: 4 }
fleet.__proto__.__proto__
// Object {}
fleet.__proto__.__proto__.__proto__
// null



Object.getPrototypeOf(fleet);
// Horse { legs: 4 }



fleet.constructor == Horse;
// true

__proto__, prototype

point to objects

constructor

points to functions

null

the end of all prototype chains

Questions?