JavaScript(Scope Chain, Closure,

Object)

IndexScope Chain

Closure

Object

Function( Scope Chain)● Javascript 에서는 Scope 는 직관적으로 이해하기 쉽지 않다

● 함수에는 Scope 속성이 존재● Scope 속성은 함수 생성과 관련된 객체의 참조 정보를 가진다 .● 이러한 객체의 참조 정보들을 Scope Chain 이라고 한다

● 함수 생성 시 모든 함수는 하나의 Scope Chain 이 생성● Scope Chain 은 함수 호출과 관련된 여러 객체의 참조를 저장하는 메모리 공간

● 수 많은 함수의 호출로 이루어진 로직에서 각 함수 내의 변수 및 함수 호출이 어느 영역을 참조 하는지에 대한 문제

Function( Scope Chain)

function A(v1, v2) { return v1 + v2}

[[scope]]

scope chain

0

Global Object

this

window

document

function

Function(Execution Context)● 함수가 실행되는 환경을

정의

function A(v1, v2) { return v1 + v2}

Execution Content

scope chain

0

1

Global Object

this

window

document

function

Activation Object

this

arguments

v1

v2

Function( Example)

testFunc

[[scope]]

scope chain

0

Global Object

this window

window [object]

document [object]

testFunc function

Function( Example)

testFunc(6,8)

Execution context

scope chain

0

1

Global Object

this window

window [object]

document [object]

testFunc function

Activation Object

this window

argument [6,8]

num1 6

num2 8

sum undefined

Clojure● Javascript 에서의 함수는 실행 후 상태를 유지할 수 없다● 상태 유지를 위한 방식

○ 전역 변수를 통한 상태 유지○ 클로저 기능 활용

Closure● Javascript 의 scope chain 을 이용하여 이미 생명 주기가 끝난 외부 함수의 변수를

참조하는 방법

Closure

outer

[[scope]]

scope chain

0

Global Object

this window

window [object]

document [object]

outer function

Closure

Closure

outer

Execution context

scope chain

0

1

Global Object

this window

window [object]

document [object]

outer function

Activation Object

this window

argument

sum 1

inner

[[scope]]

scope chain

0

1

Closure

Closure

outer

Execution context

scope chain

0

1

Global Object

this window

window [object]

document [object]

outer function

Activation Object

this window

argument []

sum 2

inner

Execution context

scope chain

0

1

2

Activation Object

this window

argument []

Closure● 함수의 상태는 실행이 종료 되며 소멸된다 .

● Closure 는 외부 함수의 상태를 [[scope]] 속성으로 가지고 있기 때문에 closure 의 실행이 종료되기 전까지 외부 함수의 상태를 유지 한다 .

Closure

outer

Execution context

scope chain

0

1

Global Object

this window

window [object]

document [object]

outer function

Activation Object

this window

argument []

sum 2

inner

Execution context

scope chain

0

1

2

Activation Object

this window

argument []

Object● 기본적으로 제공되는 객체 = 내장 객체● 사용자가 만들어 내는 객체 = 사용자 정의 객체

● 생성 방식○ 함수를 통해서 이루어진다 .

● 객체를 만들때 사용하는 함수○ Object, Number, Function, JSON, Array…..

● 객체 생성 방식○ 객체 리터럴을 이용한 간단한 객체 생성○ 생성자○ Object.create()

Object● 객체 생성 방식

○ 객체 리터럴을 이용한 간단한 객체 생성○ 생성자○ Object.create()

● 장점○ 별도 클래스 구조 없이 빠르게 객체

작성○ 객체 구성이 자유로움○ 객체의 확장 , 변경이 용이

● 단점○ 객체 구조 파악이 어려움○ 객체 구조 변경에 대비 해야함○ 재상용이 불가능함

Object● 객체 생성 방식

○ 객체 리터럴을 이용한 간단한 객체 생성○ 생성자○ Object.create()

● 장점○ 같은 구조의 객체를 여러번 생산하는

것에 유리○ 문법적인 구조에 진입 장벽이 낮다

● 단점○ 일반 함수와 생성자의 구분이 없다 .

대문자는 강제가 아니다○ 같은 구조에는 적합 , 하지만 유연함의

장점은 줄이게 된다

Object● 객체 생성 방식

○ 객체 리터럴을 이용한 간단한 객체 생성○ 생성자○ Object.create()

● 장점○ 존재하는 객체를 그대로 복사해서 다른

객체를 생산하는 경우○ 상속구조를 사용하는데 있어서 편리한

방식● 단점

○ 느린 속도

Object

user1

__proto__

name ‘hansome’

user2

__proto__

fname ‘real’

lname ‘kang’

member

userid ‘user’

passwd ‘1234’

Object

Object ( 객체 생성 방식의 차이 ) ● 클래스 기반

○ 클래스를 이용해 구조와 기능을 정의○ 할당된 메모리 공간에 구조를 그대로 적용하여 동일 구조의 객체를 생성○ 구조와 관계에 중점

● 프로토타입 기반○ 객체라 불리는 인스턴스 기반 설계○ 객체 생성후 해당 메모리 공간에 다양한 데이터와 기능을 주입하는 방식○ 속성이나 데이터가 있는지만 중요○ 따라서 공통된 속성이나 데이터의 주입방식을 고민

Prototype chain

Object (__proto__)

obj

__proto__

Object

Object (__proto__)● 객체의 참조용 링크

obj

__proto__

pSample

__proto__

Object

Object (__proto__)● 객체의 참조용 링크

obj

__proto__

Object

__proto__

Object

Object (__proto__)● 객체의 참조용 링크

obj

__proto__

Object

__proto__

p1

show()

Object

요청

Object (this)● 하나의 울타리나 경계선

obj

__proto__

p1 ‘BBB’

Object

__proto__

p1 ‘AAA’

show()

Object

Object (this)

show()

Execution Content

scope chain

0

1

Global Object

this

window

document

function

Activation Object

this sample

arguments

v1

v2

Object (this)● 기본적으로 this 는 전역 객체를 참조한다 .

● 메소드 내부의 this 는 해당 메소드를 호출한 부모 객체를 참조한다 .

● 생성자 함수 코드 내부의 this 는 새로 생성된 객체를 참조한다 .

● call() 과 apply() 메소드로 함수를 호출할 때 , 함수의 this 는 첫 번째 인자로 넘겨받은 객체를 참조한다 .

● 프로토타입 객체 메소드 내부의 this 도 해당 메소드를 호출한 부모 객체를 참조한다 .● JavaScript 의 this 키워드는 접근제어자 public 역할을 한다 .

Object (prototype of Function)● 모든 함수 객체는 자동으로 Prototype 속성이 존재● prototype ‘ 속성이 참조하는것은 함수의 프로토타입 ( 원형 ) 객체 '● ‘ 생성자 함수를 이용해 작성되는 객체들은 함수의 프로토타입 ( 원형 ) 객체 ' 를 __proto__ 가

참조하게 된다

fn1()fn1()

프로토 타입객체

prototype constructor

Object (prototype of Function)

Member()Member()

프로토 타입객체

prototype constructor

m1 m2

__proto__ __proto__