Javascript 썸네일형 리스트형 [자바스크립트 중고급] 7. 논리적 정리 프로퍼티 연동 방지 Object에 Object를 할당하면 프로퍼티 값이 연동됨 var origin {member: 100}; var dup = origin; dup.member = 200; log(origin.member); // 200 배열도 마찬가지로 연동됨 var origin = [1, 2, 3]; var dup = origin; dup[1] = 200; log(origin); // [1, 200, 3] 연동 방지: 프로퍼티 단위로 할당 var origin = {member: 100}; var dup = {}; for (var name in origin){ dup[name] = origin[name]; }; dup.member = 200; log(origin.member); log(dup.membe.. 더보기 [자바스크립트 중고급] 6. this this 개요 키워드 obj.name() 형태로 호출한 함수(메소드)에서 this로 인스턴스(오브젝트)를 참조 실행 콘텍스트의 this 바인딩 컴포넌트에 바인딩 this와 글로벌 오브젝트 글로벌 오브젝트에서 this는 글로벌 오브젝트 참조 this와 window 오브젝트 window는 JS에서 만든 것이 아니며 글로벌 오브젝트의 스코프도 아님 window와 글로벌 오브젝트를 같은 선상에서 사용 Hosw 오브젝트 개념 적용 글로벌 오브젝트에 코드 작성 window.onload = function(){ // 안이 아니라 밖에 코드 작성 }; this가 window 참조 log(this === window); // true this로 글로벌 변수 사용 var value = 100; log(this.value).. 더보기 [자바스크립트 중고급] 5. function instance function 인스턴스 기준 function Book(point){ this.point = point; }; Book.prototype.getPoint = function(){ return this.point + 200; }; var obj = new Book(100); obj.getPoint(); function 구분 빌트인 Function 오브젝트 function 오브젝트: function 키워드로 생성 function 인스턴스: new 연산자로 생성 function 오브젝트도 인스턴스 빌트인 Function 오브젝트로 생성하기 때문 성격적으로는 인스턴스이지만 new 연산자로 생성한 인스턴스와 구분하기 위해 강좌에서는 function 오브젝트로 표기 new 연산자로 생성하는 인스턴스는 일반적으로 p.. 더보기 [자바스크립트 중고급] 4. Execution Context 실행 콘텍스트 function music(title){ var musicTitle = title; }; music("음악"); Exeuction Context 함수가 실행되는 영역, 묶음 함수 코드를 실행하고 실행 결과를 저장 스펙상의 사양 music("음악")으로 함수를 호출하면 엔진은 실행 콘텍스트를 생성하고 실행 콘텍스트 안으로 이동 실행 콘텍스트 실행 단계 준비 단계 초기화 단계 코드 실행 단계 Execution Context 생성 시점 실행 가능한 코드를 만났을 때 실행 가능한 코드 유형 함수 코드 글로벌 코드 eval 코드 코드 유형을 본리한 이유 실행 콘텍스트에서 처리 방법과 실행 환경이 다르기 때문 함수 코드: 렉시컬 환경 글로벌 코드: 글로벌 환경 eval 코드: 동적 환경 실행 콘텍스트.. 더보기 [자바스크립트 중고급] 3. 스코프(Scope) 스코프 목적 범위를 제한하여 식별자를 해결하려는 것 스코프에서 식별자를 해결 식별자 해결(Identifier Resolution) 변수 이름, 함수 이름을 찾는 것 이때 스코프를 사용 이름을 찾게 되면 값을 구할 수 있음 크게는 이름을 설정하는 것도 식별자 해결 스코프는 식별자 해결을 위한 것 스코프 설정 function book(){ var point = 123; function get(){ log(point); }; get(); }; book(); // 123 엔진이 funciton book(){}을 만나면 function 오브젝트를 생성하고 스코프를 설정 생성한 function 오브젝트의 [[Scope]]에 스코프를 설정 즉, 이때 스코프가 결정됨 JS의 스코프 설정 메커니즘 마지막 줄에서 book.. 더보기 [자바스크립트 중고급] 2. Argument Argument 처리 메커니즘 Argument 처리 구조 파라미터를 {key: value} 형태로 저장 파라미터 수만큼 0부터 인덱스 부여 key로 사용 파라미터로 받은 값을 value에 설정 {0: param1, 1: param2} function get(){ return arguments; }; log(get("A", "B")); // {0: A, 1: B} Array-like key 값이 0부터 1씩 증가 length 프로퍼티가 있어야 함 엔진의 파라미터 처리 var get = function(one){ return one; }; get(77, 100); get() 함수를 호출하면서 77과 100을 파라미터 값으로 넘겨줌 넘겨받은 값을 함수의 파라미터 이름에 설정 정적 환경의 선언적 환경 레코드에 .. 더보기 [자바스크립트 중고급] 1.Function 오브젝트 function 형태 Built-in Function 오브젝트 Function.prototype.call() function 오브젝트 function book(){...} var book = function(){...} 인스턴스이지만, new 연산자로 생성한 인스턴스와 구분하기 위해 강좌에서는 function 오브젝트로 표기 function 인스턴스 new Book()처럼 new 연산자를 사용하여 Book.prototype에 연결된 메소드로 생성 function 오브젝트 생성 var book = function(){...} 엔진이 function 키워드를 만나면 빌트인 Function 오브젝트의 prototype에 연결된 메소드로 function 오브젝트 생성 생성한 오브젝트를 book 변수에 할당 bo.. 더보기 [자바스크립트 중고급] 0. 중고급 강좌 소개, 범위 강좌 방향 : 자바스크립트(ES5) 엔진 처리 중심 엔진 관점의 핵심 키워드: Execution Context, Identifier Resolution Execution Context 형태 book() 함수가 호출되면 show Function 오브젝트 생성 show의 [[Scope]]에 스코프 설정 show() 함수가 호출되면 EC 생성 함수 실행을 위한 Context 환경 구축 LEC, VEC, TBC 생성 첨부 LEC에 ER, OLER 첨부 ER에 DER, OER 첨부 DER에 show()의 변수, 함수 기록 OLER에 show의 [[Scope]]를 설정 this 바인딩 컴포넌트에 this 참조 설정 show 실행 컨텍스트(EC): { 렉시컬 환경 컴포넌트(LEC): { 환경 레코드(ER): } 선언.. 더보기 이전 1 2 3 4 5 다음
