Java script의 이해

JavaScript
(Scope Chain, Closure, Object)

Index
Scope 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
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
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의 실행이 종료되기 전까지
외부 함수의 상태를 유지 한다.

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 (객체 생성 방식의 차이)
● 클래스 기반
○ 클래스를 이용해 구조와 기능을 정의
○ 할당된 메모리 공간에 구조를 그대로 적용하여 동일 구조의 객체를 생성
○ 구조와 관계에 중점
● 프로토타입 기반
○ 객체라 불리는 인스턴스 기반 설계
○ 객체 생성후 해당 메모리 공간에 다양한 데이터와 기능을 주입하는 방식
○ 속성이나 데이터가 있는지만 중요
○ 따라서 공통된 속성이나 데이터의 주입방식을 고민
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__

Java script의 이해

More Related Content

What's hot (20)

Similar to Java script의 이해 (20)

Java script의 이해