JavaScript closure & scope

33 %
67 %
Information about JavaScript closure & scope
Technology

Published on March 8, 2014

Author: daejoon

Source: slideshare.net

Description

JavaScript closure & scope

자바스크립트의 클로져와 스코프 고대준 (kkode1911@gmail.com)

왜? • 이벤트에 많이 사용되는 클로져. • Node.js는 이벤트를 이용한다. 무척 많이. • 클로져를 이해하기 위해서는 스코프에 대한 이해가 필요.

변수 • 값 타입의 데이터 • • 숫자, 문자열, 불린, undefined, null 참조 타입의 데이터 • 숫자, 문자열, 불린, undefined, null을 제외한 모든것

변수 범위 • C, C++, Java등 일반적 언어에서 변수 범위는 {} 이다. • 자바스크립트 변수 범위는 함수이다.

프로그램 실행 단계 • 프로그램 • 파싱 • • 변수, 함수 정의 실행 • 변수 대입, 제어문, 함수호출 • * 함수 코드 파싱

파싱 단계 • 변수와 함수를 정의한다. • 3Line: myFun 변수가 undefined로 정의. • 5~8Line: myFun 함수가 정의, 3Line myFunc의 변 수를 덮어쓴다.

실행 단계 • 1Line: myFun 함수가 호출, “local variable” 출력 • 3Line: myFun에 “overwrite” 대입 • myFun이 가리키고 있던 함수는 가비지 컬렉션으로 간다. • 10Line: “overwrite” 출력 • 메소드와 프로퍼티는 실행시 판단된다.

함수 Scope • 함수 내부 속성에는 [[SCOPE]]라는 속성이 있다. • [[SCOPE]]는 우리가 접근 할 수 없다. • ECMA-262에서 정의

myFun [[SCOPE]]

Scope Chain • 함수 안의 [[SCOPE]]가 가리킨다. • 객체 배열이다. • 각 배열에는 변수 객체를 가리킨다.

myFun [[SCOPE]] Scope Chain 0

Variable Object • 변수 항목을 키-값 쌍 형태로 포함한다. • 함수가 만들어질때, 같이 만들어진다.

Global Object [[SCOPE]] Scope Chain 0 this window window myFun (object) document (object) myFun (function) … …

Execution Context • 자바스크립트에서 스코프를 아리송하게 하는놈 • 파싱 단계와 실행단계의 스코프 차이를 만든다. • 실행시 함수 스코프를 복사한후 자신만의 스코프 체인에 Activation Object을 추가한다. • 함수 실행할 때마다 Execution Context가 만들어진다.

var result = myFun(‘closure’); execution context ! Scope Chain Scope Chain 0 1 Activation Object this window arguments [name] name “closure” msg undefined Global Object this window window (object) document (object) myFun (function) result undefined … …

퀴즈 undefined

클로져? • 음~~~~ ㅡㅡ; • 예제로 Go

클로져 예제 Global Object this window 파싱 window (object) document (object) outer (function) closure1 undefined … …

클로져 예제(1) outer 함수의
 스코프체인 Global Object this outer [[SCOPE]] Scope Chain 0 window window (object) document (object) outer (function) closure1 undefined … …

클로져 예제(2) 8Line 실행 Activation Object this window arguments [num] num 1 innerFun (function) Global Object this var closure1 = outer(1); Execution Context Scope Chain window window (object) 0 document (object) 1 outer (function) closure1 undefined … … Scope Chain

클로져 예제(3) innerFun의 스코프체인 var closure1 = outer(1); Execution Context Scope Chain Scope Chain [[SCOPE]] Global Object 0 this window 1 window (object) document (object) outer (function) closure1 undefined … … Scope Chain innerFun Activation Object (outer) this window arguments [num] num 1 innerFun (function) 0 1

클로져 예제(4) Activation Object (closure) this arguments 9Line 실행 console.log(closure1()); Execution Context Scope Chain Scope Chain 0 1 2 window [] Activation Object (outer) this window arguments [num] num 1 innerFun (function) Global Object this window window (object) document (object) outer (function) closure1 (function) … …

클로져 예제(5) Activation Object (closure) this arguments 10Line 실행 console.log(closure1()); Execution Context Scope Chain Scope Chain 0 1 2 window [] Activation Object (outer) this window arguments [num] num 2 innerFun (function) Global Object this window window (object) document (object) outer (function) closure1 (function) … …

퀴즈(1)

자바스크립트의 모든 함수 는 클로져다!

참고 • 자바스크립트 객체지향 프로그래밍 • High Performance JavaScript • JavaScript The Good Parts • JavaScript The Definitive Guide 5/E

감사합니다.

Add a comment

Related presentations

Related pages

Explaining JavaScript scope and closures - Robert's talk

I thought I’d try to explain something which many people struggle with: JavaScript scope and closures. Background. There are a number of articles and ...
Read more

Javascript Closures - Jim Ley - Jibbering - JibberJim

Introduction; The Resolution of Property Names on Objects. Assignment of Values; Reading of Values; Identifier Resolution, Execution Contexts and scope chains
Read more

JavaScript Function Closures - W3Schools Online Web Tutorials

Well organized and easy to understand Web bulding tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

Closures - JavaScript | MDN - Mozilla Developer Network

Closures are functions whose inner functions refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope).
Read more

scope - How do JavaScript closures work? - Stack Overflow

How would you explain JavaScript closures to someone with a knowledge of the concepts that make up them (for example, functions, variables and the like ...
Read more

JavaScript scope and closure - Stack Overflow

JavaScript closure inside loops – simple practical example. ... JavaScript Dynamic Closure Scope. 0 Problems with scopes or closures. Hot Network Questions
Read more

Closures (Funktionsabschlüsse) - JavaScript | MDN

JavaScript; Closures (Funktionsabschlüsse) Ihre Suchergebnisse Closures ... (outer scope) deklariert werden. Closure Funktionsabschluss ...
Read more

Closures | JavaScript Tutorial

Closures. Nested function may ... Note, the this context is not related to scopes and variables. ... How variables are handled in JavaScript. How scopes work.
Read more

Scopes and Closures | JavaScript Tutorial

From the previous article, we know that a variable is a property of the LexicalEnvironment object. Here we discuss access to outer variables and nested ...
Read more

Everything you wanted to know about JavaScript scope @ ...

Everything you wanted to know about ... Understanding JavaScript scope is key to writing bulletproof ... this is called Lexical Scope or Closure ...
Read more