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

Similar to Java script의 이해

Java script의 이해