Transcript
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...


Top Related