Upload
lorant
View
42
Download
0
Embed Size (px)
DESCRIPTION
JavaScript Enlightenment. Johnathan Hebert. Agenda. Introductions Presentation Brief history of JavaScript Objects in depth Functions in depth A few tricks Questions. It is (finally) getting better. Invented by Brendan Eich @ Netscape in 1995 Standardized by Ecma in 1997 (Ecma-262) - PowerPoint PPT Presentation
Citation preview
1
JavaScript Enlightenment
Johnathan Hebert
2
Agenda
• Introductions• Presentation– Brief history of JavaScript– Objects in depth– Functions in depth– A few tricks
• Questions
3
It is (finally) getting better• Invented by Brendan Eich @ Netscape in 1995• Standardized by Ecma in 1997 (Ecma-262)• 3rd Edition standardized in Dec 1999
– Untouched for 10 years, this is the one you know• 4th Edition was abandoned
– Vendor disagreements• 5th Edition standardized in Dec 2009
– Bug fixes, enhanced built-in objects, but no new syntax– Shipped in Chrome, Firefox, Safari, Opera and IE9+
• 5.1 Edition standardized in Jun 2011– Fixes errata in 5th Edition, identical in content to 5th Edition
• ES.next AKA Harmony (6th) Edition is well on its way…– Lots of new stuff
4
JavaScript Enlightenment
• JavaScript book by Cody Lindley– http://www.javascriptenlightenment.com/
• Summary of ECMA-262 3rd edition– http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-
262,%203rd%20edition,%20December%201999.pdf
5
What's in the book?
"It was my intention to write a book to give the reader an accurate
JavaScript worldview through an examination of native JavaScript
objects and supporting nuances: complex values, primitive values,
scope, inheritance, the head object, etc. I intend this book to be a
short and digestible summary of the ECMA-262, Edition 3
specification, focused on the nature of objects in JavaScript."
- Cody Lindley
6
Everything is (acts like) an object// JavaScript only has 6 typesvar pet = {name:'george'}, // Object type = 'monkey', // String age = 5.0, // Number curious = true, // Boolean nothing = null, // Null missing = undefined; // Undefined
// what about Function, Array, Date, RegExp, etc?// they are all just objects...console.log(typeof Array.prototype); // "object"
7
Is "function" a JavaScript type?// functions are objects that implement [[call]] --// see prescribed algorithm for the typeof operator:
8
Every object has hidden properties
9
The [[prototype]] hidden property// a hidden [[prototype]] property is created// automatically and points to the prototype of the// constructor functionvar pet = { name:'george', type:'monkey', description:'curious'};
pet Object.prototype
10
Prototype link is fixed// objects do not have a property named prototype,// they have a hidden property called [[prototype]]console.log(pet.prototype) // undefined
// access it through the constructor propertyvar petProto = pet.constructor.prototype;
// you can add a property named prototype, but it// does not change the hidden [[prototype]] linkpet.prototype = {type:'animal'};
11
How does the prototype get there?// the hidden prototype link is fixed at the object// construction step – these are the same:var pet = {};var pet = new Object();
// the pet object is constructed with the Object()// constructor function, which does a few things:1. a new empty object is created in memory2. the object gets a hidden link to Object.prototype3. the this keyword in the Object() function points to the new empty object4. Object() function code is executed
12
Prescribed construct algorithm// see prescribed algorithm for object construction:
13
What does this really do?function Animal() { this.type = 'animal';}
var pet = new Animal();
14
Built-in Object Relationships
Object ()
Object.prototype {}
Function ()
Function.prototype ()
[[prototype]]
prototype
15
Define a New Constructor Function
Object ()
Object.prototype {}
Function ()
Function.prototype ()
[[prototype]]
prototype
function Animal() { this.type = 'animal';}
16
Define a New Constructor Function
Object ()
Object.prototype {}
Function ()
Function.prototype ()
[[prototype]]
prototype
Animal.prototype {}
Animal ()
function Animal() { this.type = 'animal';}
constructor
17
Create a New Object
Object ()
Object.prototype {}
Function ()
Function.prototype ()
[[prototype]]
prototype
Animal.prototype {}
Animal () pet {}
var pet = new Animal();
constructor
18
Object inheritance using prototypes
// create a named function via a function statementfunction Animal() { this.type = 'animal';}
// Animal automatically gets a prototype propertyconsole.log(typeof Animal.prototype) // 'object'
// pet will have a hidden link to Animal.prototypevar pet = new Animal();
pet{type:'animal'}
Animal.Prototype
Object.prototype
19
Functions can be constructors// the this keyword refers to the new objectfunction Animal() { this.type = 'animal';};
// any function can be invoked with the new keyword// to be a constructor (invokes [[construct]])var pet = new Animal();console.log(pet.type); // 'animal'
// No object is created without the new keyword// WARNING: this now references global objectvar pet = Animal(); // pet is undefined
20
Constructor function inheritance// will be used as the base constructor functionfunction Animal() { this.type = 'animal';};
// eventually inherit from the base constructor functionfunction Monkey() { this.likesBananas = true;}
// the magic happens here (inheritance) Monkey.prototype = new Animal();
// pet.type will refer to Animal.prototype.typevar pet = new Monkey();
// pet Monkey.prototype Animal.prototype Object.prototype
21
Something is wrong!// why does this log Animal? why not Monkey?console.log(pet.constructor);
// the orginal Monkey.prototype was overwrittenMonkey.prototype = new Animal(); // culprit
// the old Monkey.prototype had a property named// constructor – put it back:Monkey.prototype.constructor = Monkey; // fixed
22
Neat stuff with functions// start with the original constructor functionfunction Animal() { this.type = 'animal';};
// make the this keyword refer to another objectvar johnathan = {type:'person'}; // random objectconsole.log(johnathan.type); // 'person'
Animal.call(johnathan); // this === johnathanconsole.log(johnathan.type); // 'animal'
23
Immediate execution of functions// evaluate a function statement as an expression(function sayHello(name) { alert('Hello ' + (name || 'nobody'));})('George');
// another way to evaluate as an expression!function() { alert('hi'); }();
// parens not necessary for function expressionsvar result = function sayHello(name) { alert('Hello ' + (name || 'nobody'));}('George');
24
Function closures// one function returns another functionvar getSecret = function() { // private var var secret = 'JavaScript has private vars';
// this function is closed over outer vars return function() { return secret; };}();
// secret is visible to the inner function after// the outer function has returnedconsole.log(secret); // undefinedconsole.log(getSecret()); // in the circle of trust
25
Anonymous function tricks// anonymous functions can call themselves// (won't work in ECMAScript 5+ strict mode)(function(i) { console.log(++i); if (i < 10) { arguments.callee(i); }})(0);
// anonymous functions can be constructors toovar anon = new function() {this.strange = true;}();console.log(anon.strange); // true
26
Functions can have properties// count the number of times a function was calledfunction sayHello(name) { console.log('Hello ' + (name || 'nobody')); arguments.callee.numCalls++;}sayHello.numCalls = 0;
// call the function a couple of timessayHello('Curious George');sayHello('Man in the yellow hat');
// numCalls is like a static propertyconsole.log(sayHello.numCalls); // 2
27
Why is this stuff important?// understand the libraries you are using(function( window, undefined ) { ... // the entire jQuery library})(window);
// you might need it outside the browser (soon)var http = require('http');http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(1337, "127.0.0.1");
28
Summary
• Everything in JavaScript is (acts like) an object• Objects have hidden links to a [[prototype]]• Functions are just "callable objects"• Be careful with semantics– Functions have a hidden [[prototype]] property– Functions also have a visible prototype property
• Pay close attention to scoping– Lexical scoping by default– Scope chain can be modified at runtime
29
Questions
?