JavaScript - the hard parts, Yehonatan Daniv

Começar. É Gratuito
ou inscrever-se com seu endereço de e-mail
JavaScript - the hard parts, Yehonatan Daniv por Mind Map: JavaScript - the hard parts, Yehonatan Daniv

1. slides

1.1. ...

1.1.1. document

1.1.1.1. reference to the DOM

1.1.1.2. contained in window

1.1.1.3. this isn't JS

1.1.1.3.1. it's a reference to the HTML DOM elements

1.2. types

1.2.1. window

1.2.1.1. the global scope (browser-based JS)

1.2.1.1.1. implemented as JS object

1.2.1.1.2. everything defined is there

1.2.2. local

1.2.2.1. either

1.2.2.1.1. function

1.2.2.1.2. with

2. general

2.1. namespace of all things defined

2.2. JS engine goes over names to resolve them

2.3. scope is created once we define it

2.3.1. e.g.

2.3.1.1. function

2.4. internally, engine creates a scope

2.4.1. allocates memory

2.5. when the function is called, the scope is initialized

2.6. nested scopes create scope chain

2.6.1. that's what the engine traverses when doing resolution

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

3. scopes & scope chains

3.1. Scope

3.1.1. Variable Object

3.1.1.1. VO

3.1.1.2. holds all *identifiers* declared in its context

3.1.2. For the global object it's window

3.1.3. there's a scope created when going over the definition, & there's an activation object when the function is invoked

3.1.3.1. Execution context

3.1.3.1.1. including parameters & context

3.2. Execution context

3.2.1. EC

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

3.2.3. Forms a closure

3.2.3.1. the execution context state is kept alive with the function

3.3. Flow

3.3.1. (see diagrams on slides)

3.4. Q&A

3.4.1. JS is as ugly as PHP, in the sense that there isn't much difference between local & global variables

3.4.1.1. It's very easy to override global variables when defining local variables

3.4.1.2. & vice versa, define global variables in local scopes by mistake

4. about

4.1. Yehonatan Daniv

4.1.1. Django & Client-side developer

4.2. tag line

4.2.1. how I learned to stop worrying & love JS

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

4.3.1. which are dry & boring

5. The parts

5.1. this

5.1.1. a property of the EC

5.1.2. immutable

5.1.2.1. can't do:

5.1.2.1.1. this = ...

5.1.3. a reference to a JS object or to null

5.1.4. assigned by the caller when EC is created & entered

5.1.5. determined by the current form of call expression

5.1.5.1. engine checks what's left to the ()

5.1.5.1.1. reference type

5.1.5.1.2. else

5.1.5.2. examples

5.1.5.2.1. function foo() { alert(this); } foo();

5.1.5.2.2. foo.prototype.constructor();

5.1.5.2.3. dynamic binding:

5.1.5.3. in JS there are 9 types

5.1.5.3.1. ..

5.1.6. call expressions

5.1.6.1. examples

5.1.6.1.1. Untitled

5.1.6.2. ...

5.1.7. determination

5.1.7.1. rule of thumb

5.1.7.1.1. if a function is passed as a parameter

5.1.8. to change that

5.1.8.1. use bind

5.1.8.1.1. since ES5, it's in Function.prototype

5.1.8.1.2. using the trick

5.1.8.1.3. when we have a scope within scope

5.1.8.2. or

5.1.8.2.1. use global objects & always invoke methods of these global objects

5.2. prorotype & the __proto__ chain

5.2.1. The "OOP" in JS

5.2.2. history

5.2.2.1. JS was developed in about 2 weeks

5.2.2.2. was based on several paradigms

5.2.2.3. Java, Python, Lisp &c

5.2.3. OOP in JS

5.2.3.1. Instead of class -> Object

5.2.3.2. Instead of instance -> Object

5.2.3.3. Instead of super -> __proto__

5.2.3.3.1. implemented inly in some browsers

5.2.4. [[prototype]]

5.2.4.1. Every Object in JS has an internal, accessible & Immutable property - [[prototype]]

5.2.4.2. For Mozilla

5.2.4.2.1. __proto__

5.2.4.3. For others

5.2.4.3.1. ...

5.2.4.4. Eince ES5

5.2.4.4.1. Object.create

5.2.4.4.2. Object.getProtoytpeOf

5.2.5. functions have an attribute called prototype

5.2.6. Prototype chains

5.2.6.1. resolution chain is like scope

5.2.6.1.1. Object.property_name

5.2.7. ES3 syle

5.2.7.1. Untitled

5.2.7.2. enables us to create instances with given object as prototype

5.2.8. ES5 style

5.2.8.1. Untitled

5.2.8.2. Untitled

5.3. Q&A

5.3.1. ES5 (EcmaScript) supported in?

5.3.1.1. IE >= 9

5.3.1.2. FF >= 3.5

5.3.1.3. Chrome

5.3.1.4. Safari >= 5.1

5.3.2. JS will be killed next week by Google's Dart