September 30, 2008     Advanced Javascript: Closures, Prototypes, Inheritance (Stoyan Stefanov)

(Note: This is one of the sessions I was most excited about in the whole conference. This is some stuff I’m just starting to really understand, and I find it fascinating.)

- recommendation: use Firebug console as a learning tool to play with different code snippets & styles

Objects
- an object is basically a hash
- it possesses keys and values
- a value can be a function, which becomes a method on the object
- object literal: var obj = {a:1, “a b c”:2, myFunc:function(){}, f:45}
- an array is an object in which the keys are auto-incremented numbers, with a few extras like .length
- JSON is an object literal, but requires quotes around all keys and non-numerical values
- there are no classes in javascript

Functions
- functions are also objects, therefore they can be assigned to variables, augmented, etc.
- when assigning a function to a variable, the function *can* be named and can have a different name from the variable name
- using .call(), can call a function and pass in the “this” as the first argument, setting “this” to something besides the default
- a function can return a function

Constructor
- the only thing that makes a constructor a constructor is that it is called with new before it
- no indication that it is a constructor in the function itself
- when called with new, a constructor creates and returns a new “this”
- convention: constuctors have initial caps, other functions don’t
- aThing.constructor gives you access back to the constructor function of aThing
- tip: use empty literals to initialize objects, arrays, functions, regex; don’t use formal constructor calls

Prototype
- prototype is a property of every function object
- this is tricky: prototype belongs to the constructor function, not directly to every object created by that constructor function
- prototype is linked to by those objects, not included within them
- BUT if you augment prototype, that change is instantly accessible to all objects created by that constructor function (because any calls on an object check the object’s prototype if they don’t find something in the object itself)
- prototype can be used to make functions and properties available to an object
- you can use hasOwnProperty to tell if something is a property of the object (will return false if the property is in the prototype)
- you can use isPrototypeOf to test if a prototype belongs to something
- don’t use the __proto__ property, it’s not exposed in all browsers
- prototype is what allows us to do inheritance in javascript: set an object’s prototype to an instance of the parent object to inherit all of that parent’s “stuff”
- this is why it’s called prototypal inheritance (vs. classical inheritance - using classes)
- quirk: with this type of inheritance, aThing.constructor = AThingParent(); have to fix by explicitly resetting the constructor property, with aThing.prototype.constructor = AThing;
- prototype allows you to augment built-in objects like String (but there are problems with this in different browsers, also with interoperability)
- augmenting objects with prototype is better on memory, because it only creates one copy of a function/variable which is shared, rather than one copy for each object if the function/variable were declared within the constructor

Scope
- no block scope, only function scope
- implied global scope if you declare without “var”; watch out!!!
- avoid global scope - put everything inside a function or object to avoid global scoping

Closures
- closure means accessing properties from an outer function within an inner function
- when the inner function is called, it will have access to properties of containing functions, even if those functions have already returned
- those properties will have the value they had when the containing function returned, NOT when the inner function was initially called (e.g. in a loop, all inner functions using the loop counter will be using the end value of the loop)
- in order to fix this, have to create another inner function, assign the value explicitly when the function is created
*( he started going really fast on this part, and I didn’t catch everything; need to research more)

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment