9주차에는 '자바스크립트 중고급:근본 핵심 논리'에서
this문법과 논리적 정리를 공부했습니다. 😁
this
this 개요
- 함수에서 this로 인스턴스를 참조함
- 실행 콘텍스트의 this 바인딩 컴포넌트에 바인딩
this와 글로벌 오브젝트
- 글로벌 오브젝트에서 this는 글로벌 오브젝트 참조
- Host 오브젝트 개념 적용
this와 strict 모드
- strict모드
- 글로벌 오브젝트로 작성
- window.book()의 window. 와같이 작성
- 함수 앞에 오브젝트를 작성하지 않으면 this 바인딩 컴포넌트에 undefined가 설정되어 this로 window를 참조할 수 없음
function book(){ "use strict"; return this; }; var result = book();
this 참조 오브젝트
- this가 참조하는 오브젝트
var book = { point = 100; member : { point : 200, get: function(){ log(this==book.member); log(this.point); } } }; book.member.get();
- 마지막 줄에서 book.member.get() 호출
- this가 member 오브젝트 참조
- this바인딩 컴포넌트에 book.member 오브젝트 설정됨
this와 인스턴스
- 인스턴스는 인스턴스마다의 고유 값을 유지함
- this로 인스턴스를 참조하여 프로퍼티에 접근함
call()
- 첫번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트를 작성함
- this외에 다른 오브젝트도 가능
- 파라미터 수가 고정일 때 사용
apply()
- 두번째 파라미터 수가 유동적일때 사용
bind()
- 두번에 나누어 처리
- function 오브젝트 생성
- 생성한 오브젝트를 함수로 호출
- 파라미터
- 1번 파라미터 - this로 참조할 오브젝트
- 2번 파라미터에 호출된 함수의 파라미터 값
- 파라미터 병합 가능
논리적 정리
프로퍼티 연동방지
- 오브젝트에 오브젝트를 할당하면 프로퍼티 값, 배열 등이 연동됨
- 프로퍼티 연동 방지 → 프로퍼티 단위로 할당함
재귀함수
- 함수 안에서 자신 함수를 호출하는 형태
var book = { member : {name:100}, point : {value:200} }; function show(param){ for(var type in param){ typeof param[type] === 'object' ?show(param[type]) : log(type + ":", param[type]); } }; show(book);
즉시 실행 함수
- 엔진이 함수를 만났을 때 자동으로 함수를 실행함 (함수 즉시 실행)
- 과정
- 표현식을 평가함
- 함수이름이 필요함
- 함수 표현식 끝에 소괄호 작성
- 소괄호 안에 함수 작성
클로저
- function 오브젝트를 생성할 때 함수가 속한 스코프를 [[Scope]]에 설정하고 함수가 호출되었을 때 [[Scope]]의 프로퍼티를 사용하는 매커니즘임
- [[Scope]]의 설정과 사용 방법을 이해하면 클로저는 단지 논리적인 설명임
클로저 논리
- 실행중인 function 오브젝트에 작성한 변수, 함수를 선언적 환경 레코드에 설정
- [[Scope]]의 변수, 함수를 외부 렉시컬 환경 참조에 바인딩
- 변수 이름으로 접근하여 값을 사용하거나 변경함
- 함수를 호출할 수 있음
클로저와 무명함수
- 무명함수 안에 작성한 값, 함수는 무명 함수가 끝나면 지워짐
- 다시 사용하려면 저장 필요
- 무명 함수는 저장하지 않으려는 의도로 사용하기는 함
- 클로저 활용
- 클로저는 함수 밖 스코프의 변수와 함수를 사용할 수 있음
- 변수는 외부에서 직접 접근할 수 없으므로 정보 보호
- 무명함수 안에서 클로저의 변수를 가진 함수를 반환하면 함수의 재사용과 정보보호 가능
'3-1기 스터디 > JavaScript' 카테고리의 다른 글
[14주차] 19. Symbol Property, 20. Symbol 함수 메소드, 21. Map 오브젝트, 22. WeakMap 오브젝트, 23. Set 오브젝트, 24. WeakSet 오브젝트 (0) | 2022.02.11 |
---|---|
[7주차] Function 오브젝트, Argument (0) | 2022.01.17 |
[5주차] Array 오브젝트(ES3 기준), Array 오브젝트(ES5 기준) (0) | 2021.11.25 |
[4주차] Object 오브젝트, Function 오브젝트, Global 오브젝트 (0) | 2021.11.10 |
[3주차] 오브젝트, 빌트인, Number 오브젝트, String 오브젝트 (0) | 2021.11.10 |
댓글