Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

JavaScript - the hard parts, Yehonatan Daniv by Mind Map: JavaScript - the hard parts,
Yehonatan Daniv
5.0 stars - 2 reviews range from 0 to 5

JavaScript - the hard parts, Yehonatan Daniv

general

namespace of all things defined

JS engine goes over names to resolve them

scope is created once we define it

e.g., function

internally, engine creates a scope

allocates memory

when the function is called, the scope is initialized

nested scopes create scope chain

that's what the engine traverses when doing resolution

{} forms a scope in other languages, but not in JS

scopes & scope chains

Scope

Variable Object, VO, holds all *identifiers* declared in its context

For the global object it's window

there's a scope created when going over the definition, & there's an activation object when the function is invoked, Execution context, including parameters & context

Execution context

EC

VO + [[scope]] + the "this" value

Forms a closure, the execution context state is kept alive with the function

Flow

(see diagrams on slides)

Q&A

JS is as ugly as PHP, in the sense that there isn't much difference between local & global variables, It's very easy to override global variables when defining local variables, & vice versa, define global variables in local scopes by mistake

about

Yehonatan Daniv

Django & Client-side developer

tag line

how I learned to stop worrying & love JS

the talk is on the high-level, not about internals

which are dry & boring

The parts

this

a property of the EC

immutable, can't do:, this = ...

a reference to a JS object or to null

assigned by the caller when EC is created & entered

determined by the current form of call expression, engine checks what's left to the (), reference type, base object of referenced object, else, null, examples, function foo() { alert(this); } foo();, this is global, foo.prototype.constructor();, this is foo.prototype, dynamic binding:, Untitled, in JS there are 9 types, ..

call expressions, examples, Untitled, ...

determination, rule of thumb, if a function is passed as a parameter, "this" will change to the base object of the invoker

to change that, use bind, since ES5, it's in Function.prototype, using the trick, Untitled, when we have a scope within scope, or, use global objects & always invoke methods of these global objects, never using "this"

prorotype & the __proto__ chain

The "OOP" in JS

history, JS was developed in about 2 weeks, was based on several paradigms, Java, Python, Lisp &c

OOP in JS, Instead of class -> Object, Instead of instance -> Object, Instead of super -> __proto__, implemented inly in some browsers, Chrome & FF, Resig (JQuery) wrote something that emulates it

[[prototype]], Every Object in JS has an internal, accessible & Immutable property - [[prototype]], For Mozilla, __proto__, For others, ..., Eince ES5, Object.create, Object.getProtoytpeOf

functions have an attribute called prototype

Prototype chains, resolution chain is like scope, Object.property_name, Found?, Not found?, Object.__proto__.property_name, Found?, Not found?, ...

ES3 syle, Untitled, enables us to create instances with given object as prototype

ES5 style, Untitled, Untitled

Q&A

ES5 (EcmaScript) supported in?, IE >= 9, FF >= 3.5, Chrome, Safari >= 5.1

JS will be killed next week by Google's Dart

slides

...

document, reference to the DOM, contained in window, this isn't JS, it's a reference to the HTML DOM elements

types

window, the global scope (browser-based JS), implemented as JS object, everything defined is there

local, either, function, every time the the function word appears, with, this is evil & removed in ES5 Strict mode, Crokford:, breaks lexical scope