Desenvolvimento Frontend:
JavaScript
Cesar 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
c
c 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
this
Toda 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)
closure
Closure é 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
modules
Padrões: clássico e moderno
Padrão clássico
Padrão clássico
Padrão moderno
ES6+
foo.js

Desenvolvimento Frontend- JavaScript - Share