Metaprogramming JavaScript

94
Metaprogramming JavaScript Dan Webb ([email protected] )

description

As presented at @media Ajax in London on the 20th November 2007.

Transcript of Metaprogramming JavaScript

Page 1: Metaprogramming  JavaScript

Metaprogramming JavaScript

Dan Webb ([email protected])

Page 2: Metaprogramming  JavaScript

What?

the writing of computer programs that write or manipulate other programs (or themselves) as theirdata”“

Page 3: Metaprogramming  JavaScript

With JavaScript?!★ Small and fiesty but widely misunderstood

★ Relies on few but powerful constructs

★ You can work with functions, arguments, built-ins types and mechanisms like inheritance at runtime

★ Techniques underpin many JS libraries

Page 4: Metaprogramming  JavaScript

JavaScript Exposed:Objects Out Of

Control!

Page 5: Metaprogramming  JavaScript

Play along!

Page 6: Metaprogramming  JavaScript

4 building blocks

Page 7: Metaprogramming  JavaScript

(Nearly) everything is a hash

Page 8: Metaprogramming  JavaScript

numberstring

booleanundefined

Page 9: Metaprogramming  JavaScript

everything else is an Object

Page 10: Metaprogramming  JavaScript
Page 11: Metaprogramming  JavaScript

This works with any object

Page 12: Metaprogramming  JavaScript
Page 13: Metaprogramming  JavaScript

Expandos: a special case

Page 14: Metaprogramming  JavaScript
Page 15: Metaprogramming  JavaScript
Page 16: Metaprogramming  JavaScript
Page 17: Metaprogramming  JavaScript

Inspecting objects

Page 18: Metaprogramming  JavaScript
Page 19: Metaprogramming  JavaScript
Page 20: Metaprogramming  JavaScript

Inspecting types

Page 21: Metaprogramming  JavaScript
Page 22: Metaprogramming  JavaScript
Page 23: Metaprogramming  JavaScript
Page 24: Metaprogramming  JavaScript

Wha?!

Page 25: Metaprogramming  JavaScript
Page 26: Metaprogramming  JavaScript

First typeofthen instanceof

Page 27: Metaprogramming  JavaScript

Functions are Objects

Page 28: Metaprogramming  JavaScript
Page 29: Metaprogramming  JavaScript

'Methods' are just functions that are

assigned to a property of an object

Page 30: Metaprogramming  JavaScript
Page 31: Metaprogramming  JavaScript
Page 32: Metaprogramming  JavaScript
Page 33: Metaprogramming  JavaScript
Page 34: Metaprogramming  JavaScript
Page 35: Metaprogramming  JavaScript
Page 36: Metaprogramming  JavaScript
Page 37: Metaprogramming  JavaScript
Page 38: Metaprogramming  JavaScript

arguments

Page 39: Metaprogramming  JavaScript
Page 40: Metaprogramming  JavaScript
Page 41: Metaprogramming  JavaScript
Page 42: Metaprogramming  JavaScript

Functions can return other functions

Page 43: Metaprogramming  JavaScript
Page 44: Metaprogramming  JavaScript
Page 45: Metaprogramming  JavaScript

Closure

Page 46: Metaprogramming  JavaScript

Back to wikipedia...

A closure occurs when a function is defined within another function, and the inner function refers to local variables of the outer function. “ ”

Page 47: Metaprogramming  JavaScript
Page 48: Metaprogramming  JavaScript
Page 49: Metaprogramming  JavaScript

Why is that useful?

Page 50: Metaprogramming  JavaScript
Page 51: Metaprogramming  JavaScript
Page 52: Metaprogramming  JavaScript
Page 53: Metaprogramming  JavaScript

Functions can be used to make objects

Page 54: Metaprogramming  JavaScript
Page 55: Metaprogramming  JavaScript

Constructor functionsare just functions

Page 56: Metaprogramming  JavaScript

The magic is inthe new operator

Page 57: Metaprogramming  JavaScript
Page 58: Metaprogramming  JavaScript
Page 59: Metaprogramming  JavaScript
Page 60: Metaprogramming  JavaScript

inheritance

Page 61: Metaprogramming  JavaScript
Page 62: Metaprogramming  JavaScript
Page 63: Metaprogramming  JavaScript
Page 64: Metaprogramming  JavaScript
Page 65: Metaprogramming  JavaScript
Page 66: Metaprogramming  JavaScript
Page 67: Metaprogramming  JavaScript

The point is:its all just functions,

objects and properties

Page 68: Metaprogramming  JavaScript

We can hack it all.

Page 69: Metaprogramming  JavaScript

So what can you do with this stuff?

Page 70: Metaprogramming  JavaScript

Patch holes in bad implementations

Page 71: Metaprogramming  JavaScript
Page 72: Metaprogramming  JavaScript
Page 73: Metaprogramming  JavaScript

Self optimising code

Page 74: Metaprogramming  JavaScript
Page 75: Metaprogramming  JavaScript
Page 76: Metaprogramming  JavaScript

Pretty APIs

Page 77: Metaprogramming  JavaScript
Page 78: Metaprogramming  JavaScript
Page 79: Metaprogramming  JavaScript

Domain Specific Languages

Page 80: Metaprogramming  JavaScript

DOMBuilderhttp://danwebb.net/lowpro

Page 81: Metaprogramming  JavaScript
Page 82: Metaprogramming  JavaScript
Page 83: Metaprogramming  JavaScript
Page 84: Metaprogramming  JavaScript

DIY language features

Page 85: Metaprogramming  JavaScript

John Resig's method overloading

http://ejohn.org/blog/javascript-method-overloading/

Page 86: Metaprogramming  JavaScript
Page 87: Metaprogramming  JavaScript
Page 88: Metaprogramming  JavaScript
Page 89: Metaprogramming  JavaScript

Prototype 1.6 Classeshttp://prototypejs.org/learn/class-inheritance

Page 90: Metaprogramming  JavaScript
Page 91: Metaprogramming  JavaScript
Page 92: Metaprogramming  JavaScript

and a lot more...

Page 93: Metaprogramming  JavaScript

Looking back...★ JavaScript is small but totally flexible

★ A handful of techniques provide everything you need

★ It's all about objects, properties and functions

★ Don't worry if its not all sunk in. Have a play around. Slides will be available.

Page 94: Metaprogramming  JavaScript

Coming Soon...