desenvolvimento frontend- javascript - share

Desenvolvimento Frontend: JavaScriptCesar William Alvarenga

About me

@cesarwbr

http://www.cesarwilliam.com

http://www.ecma-international.org/ecma-262/5.1/

Agenda

● Scope● Nested Scope● Hoisting● this● Closure

Somente funções define escopo em JavaScript

Somente funções define escopo em JavaScript

cc c

Chrome DevTools

discover-devtools.codeschool.com

IIFE

IIFE

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

IIFE

JQuery Code! :)

Escopo em blocos no ES6

let

let (ES6+)

let (ES6+)

Hoisting

Hoisting

Hoisting

Hoisting

Hoisting: Primeiro funções

Hoisting: let (ES6+) “temporary dead zone”

Exercício: Dia 3

thisToda função, quando está sendo executada, tem uma referencia para o

contexto em que foi executada, chamada this.

this

this: implicit & default binding

this: implicit & default binding

bar1

bar2

bar3

this: implicit & default binding

this: explicit binding

this: hard binding

this: hard binding

MDN Polyfill

this: new

this rules priority

1. called with ‘new’?2. called with ‘call’ or ‘apply’?3. called via an object?4. DEFAULT: global object (except strict mode)

closureClosure é quando uma função "lembra" do seu escopo léxico mesmo quando a

função é executada fora do seu escopo léxico.

closure

closure

closure

closure

closure

closure

closure

closure

closure

closure

modulesPadrões: clássico e moderno

Padrão clássico

Padrão clássico

Padrão moderno

ES6+

foo.js