Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript
(Scope Chain, Closure, Object)
Index
Scope Chain
Closure
Object
Function( Scope Chain)
● Javascript에서는 Scope는 직관적으로 이해하기 쉽지 않다
● 함수에는 Scope 속성이 존재
● Scope 속성은 함수 생성과 관련된 객체의 참조 정보를 가진다.
...
Function( Scope Chain)
function A(v1, v2) {
return v1 + v2
}
[[scope]]
scope chain
0
Global Object
this
window
document
fu...
Function(Execution Context)
● 함수가 실행되는 환경을 정
의
function A(v1, v2) {
return v1 + v2
}
Execution Content
scope chain
0
1
Glo...
Function( Example)
testFunc
[[scope]]
scope chain
0
Global Object
this window
window [object]
document [object]
testFunc f...
Function( Example)
testFunc(6,8)
Execution context
scope chain
0
1
Global Object
this window
window [object]
document [obj...
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...
Closure
Closure
outer
Execution context
scope chain
0
1
Global Object
this window
window [object]
document [object]
outer function...
Closure
● 함수의 상태는 실행이 종료 되며 소멸된다.
● Closure는 외부 함수의 상태를 [[scope]]속성으로 가
지고 있기 때문에 closure의 실행이 종료되기 전까지
외부 함수의 상태를 유지 한다.
Closure
outer
Execution context
scope chain
0
1
Global Object
this window
window [object]
document [object]
outer function...
Object
● 기본적으로 제공되는 객체 = 내장 객체
● 사용자가 만들어 내는 객체 = 사용자 정의 객체
● 생성 방식
○ 함수를 통해서 이루어진다.
● 객체를 만들때 사용하는 함수
○ Object, Number, F...
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 (객체 생성 방식의 차이)
● 클래스 기반
○ 클래스를 이용해 구조와 기능을 정의
○ 할당된 메모리 공간에 구조를 그대로 적용하여 동일 구조의 객체를 생성
○ 구조와 관계에 중점
● 프로토타입 기반
○ 객체...
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 ...
Object (this)
● 기본적으로 this는 전역 객체를 참조한다.
● 메소드 내부의 this는 해당 메소드를 호출한 부모 객체를 참조한다.
● 생성자 함수 코드 내부의 this는 새로 생성된 객체를 참조한다.
●...
Object (prototype of Function)
● 모든 함수 객체는 자동으로 Prototype 속성이 존재
● prototype속성이 참조하는것은 ‘함수의 프로토타입(원형) 객체'
● 생성자 함수를 이용해 작성...
Object (prototype of Function)
Member()
Member()
프로토 타입객
체
prototype constructor
m1 m2
__proto__ __proto__
Upcoming SlideShare
Loading in …5
×

Java script의 이해

473 views

Published on

- JavaScript의 Scope Chain 개념 및 내용
- JavaScript의 Closure 개념 및 내용
- JavaScript의 Object 개념 및 내용

Published in: Software
  • Be the first to comment

Java script의 이해

  1. 1. JavaScript (Scope Chain, Closure, Object)
  2. 2. Index Scope Chain Closure Object
  3. 3. Function( Scope Chain) ● Javascript에서는 Scope는 직관적으로 이해하기 쉽지 않다 ● 함수에는 Scope 속성이 존재 ● Scope 속성은 함수 생성과 관련된 객체의 참조 정보를 가진다. ● 이러한 객체의 참조 정보들을 Scope Chain이라고 한다 ● 함수 생성 시 모든 함수는 하나의 Scope Chain 이 생성 ● Scope Chain은 함수 호출과 관련된 여러 객체의 참조를 저장하는 메모리 공간 ● 수 많은 함수의 호출로 이루어진 로직에서 각 함수 내의 변수 및 함수 호출이 어느 영 역을 참조 하는지에 대한 문제
  4. 4. Function( Scope Chain) function A(v1, v2) { return v1 + v2 } [[scope]] scope chain 0 Global Object this window document function
  5. 5. 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
  6. 6. Function( Example) testFunc [[scope]] scope chain 0 Global Object this window window [object] document [object] testFunc function
  7. 7. 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
  8. 8. Clojure ● Javascript에서의 함수는 실행 후 상태를 유지할 수 없다 ● 상태 유지를 위한 방식 ○ 전역 변수를 통한 상태 유지 ○ 클로저 기능 활용
  9. 9. Closure ● Javascript의 scope chain을 이용하여 이미 생명 주기가 끝난 외부 함수의 변수를 참조 하는 방법
  10. 10. Closure outer [[scope]] scope chain 0 Global Object this window window [object] document [object] outer function
  11. 11. Closure
  12. 12. 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
  13. 13. Closure
  14. 14. 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 []
  15. 15. Closure ● 함수의 상태는 실행이 종료 되며 소멸된다. ● Closure는 외부 함수의 상태를 [[scope]]속성으로 가 지고 있기 때문에 closure의 실행이 종료되기 전까지 외부 함수의 상태를 유지 한다.
  16. 16. 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 []
  17. 17. Object ● 기본적으로 제공되는 객체 = 내장 객체 ● 사용자가 만들어 내는 객체 = 사용자 정의 객체 ● 생성 방식 ○ 함수를 통해서 이루어진다. ● 객체를 만들때 사용하는 함수 ○ Object, Number, Function, JSON, Array….. ● 객체 생성 방식 ○ 객체 리터럴을 이용한 간단한 객체 생성 ○ 생성자 ○ Object.create()
  18. 18. Object ● 객체 생성 방식 ○ 객체 리터럴을 이용한 간단한 객체 생성 ○ 생성자 ○ Object.create() ● 장점 ○ 별도 클래스 구조 없이 빠르게 객체 작 성 ○ 객체 구성이 자유로움 ○ 객체의 확장, 변경이 용이 ● 단점 ○ 객체 구조 파악이 어려움 ○ 객체 구조 변경에 대비 해야함 ○ 재상용이 불가능함
  19. 19. Object ● 객체 생성 방식 ○ 객체 리터럴을 이용한 간단한 객체 생성 ○ 생성자 ○ Object.create() ● 장점 ○ 같은 구조의 객체를 여러번 생산하는 것 에 유리 ○ 문법적인 구조에 진입 장벽이 낮다 ● 단점 ○ 일반 함수와 생성자의 구분이 없다. 대 문자는 강제가 아니다 ○ 같은 구조에는 적합, 하지만 유연함의 장점은 줄이게 된다
  20. 20. Object ● 객체 생성 방식 ○ 객체 리터럴을 이용한 간단한 객체 생성 ○ 생성자 ○ Object.create() ● 장점 ○ 존재하는 객체를 그대로 복사해서 다른 객체를 생산하는 경우 ○ 상속구조를 사용하는데 있어서 편리한 방식 ● 단점 ○ 느린 속도
  21. 21. Object user1 __proto__ name ‘hansome’ user2 __proto__ fname ‘real’ lname ‘kang’ member userid ‘user’ passwd ‘1234’
  22. 22. Object
  23. 23. Object (객체 생성 방식의 차이) ● 클래스 기반 ○ 클래스를 이용해 구조와 기능을 정의 ○ 할당된 메모리 공간에 구조를 그대로 적용하여 동일 구조의 객체를 생성 ○ 구조와 관계에 중점 ● 프로토타입 기반 ○ 객체라 불리는 인스턴스 기반 설계 ○ 객체 생성후 해당 메모리 공간에 다양한 데이터와 기능을 주입하는 방식 ○ 속성이나 데이터가 있는지만 중요 ○ 따라서 공통된 속성이나 데이터의 주입방식을 고민 Prototype chain
  24. 24. Object (__proto__) obj __proto__ Object
  25. 25. Object (__proto__) ● 객체의 참조용 링크 obj __proto__ pSample __proto__ Object
  26. 26. Object (__proto__) ● 객체의 참조용 링크 obj __proto__ Object __proto__ Object
  27. 27. Object (__proto__) ● 객체의 참조용 링크 obj __proto__ Object __proto__ p1 show() Object 요 청
  28. 28. Object (this) ● 하나의 울타리나 경계선 obj __proto__ p1 ‘BBB’ Object __proto__ p1 ‘AAA’ show() Object
  29. 29. Object (this) show() Execution Content scope chain 0 1 Global Object this window document function Activation Object this sample arguments v1 v2
  30. 30. Object (this) ● 기본적으로 this는 전역 객체를 참조한다. ● 메소드 내부의 this는 해당 메소드를 호출한 부모 객체를 참조한다. ● 생성자 함수 코드 내부의 this는 새로 생성된 객체를 참조한다. ● call()과 apply() 메소드로 함수를 호출할 때, 함수의 this는 첫 번째 인자로 넘겨받은 객체를 참조한다. ● 프로토타입 객체 메소드 내부의 this도 해당 메소드를 호출한 부모 객체를 참조한다. ● JavaScript의 this 키워드는 접근제어자 public 역할을 한다.
  31. 31. Object (prototype of Function) ● 모든 함수 객체는 자동으로 Prototype 속성이 존재 ● prototype속성이 참조하는것은 ‘함수의 프로토타입(원형) 객체' ● 생성자 함수를 이용해 작성되는 객체들은 ‘함수의 프로토타입(원형) 객체'를 __proto__가 참조하 게 된다 fn1() fn1() 프로토 타입객 체 prototype constructor
  32. 32. Object (prototype of Function) Member() Member() 프로토 타입객 체 prototype constructor m1 m2 __proto__ __proto__

×