[TIL 19] 클로저와 This

_dodo_hee·2021년 3월 5일

기초 자바스크립트

JAVASCRIPT

목록 보기

11/17

저번 TIL로 함수에 대해 전체적으로 다뤘는데 공부하면서 이해가 가려다가 말려다가 하는
클로저와 this에 대해 알아보도록 하자.

클로저 Closure

클로저는 리액트에서도 이용이 많이 되고 자바스크립트에서도 강력한 기능으로 사용되고 있다.
클로저를 이용하면 변수를 은닉하여 지속성을 보장하는 등의 다양한 기능 구현이 가능하다.

🖐 클로저를 이해하기전에 스코프를 이해해야한다. 내가 정리한 - 스코프 TIL 🖐

클로저 이해하기 🤨

클로저는 생성한 시점에 스코프 체인을 계속 가지고 있는 것이다.
원래는 함수가 종료되면 내부에 선언한 변수는 사라지지만,
클로저는 스코프 체인을 계속 가지고 있어 함수 내부의 변수를 참조 할 수 있게 된다.

❌주의❌

클로저는 자신이 생성될 때의 환경을 기억해야해서 메모리 손상을 일으킬 수 있다.
밑에서 클로저를 유용하게 사용하는 법을 자세히 알아보자.

클로저 자세히 알아보기 🔍

클로저를 가장 유용하게 사용하는 경우며, 현재 상태를 기억하고 변경된 최신 상태를 유지한다.


function makeCounter() {
	let const = 0;
  	return f;
  	function f() {
    	return count++;
    }
}
const counter = makeCounter();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

counter는 전역을 가르킨다.
counter가 makeCounter를 호출하면, 렉시컬 환경 컴포넌트가 생성.
makeCounter 안에 중첩된 함수의 함수 객체를 생성해서 반환.
렉시컬 환경 컴포넌트를 참조하는 중첨 함수가 정의한 클로저 생성.

여기서, makeCounter 외부함수 또는 렉시컬 환경 컴포넌트는 클로저의 내부 상태.
외부함수가 호출될때마다 새로운 클로저 내부가 생성.

클로저의 내부상태는 외부로 부터 은폐되어 있고, 중첩 함수 안에서만 읽거나 쓰기가 가능.

This

this의 값은 함수를 호출하는 방법에 의해 결정된다. -mdn-

this 바인딩 규칙

기본 바인딩 : 함수 선언식을 사용하면 this는 전역객체와 바인딩.
명시적 바인딩 : call,apply,bind로 this값을 지정.
암시적 바인딩 : 객체의 프로퍼티로 접근해 this 값을 가져온다.
new 연산자 바인딩 : 생성자 함수 내에서 정의한 this가 인스턴스에 바인딩.
예외 setTimeout : 콜백함수의 this는 전역 객체로 바인딩.

this 예제

const people = {
  name: "dohee",
  iAm: function () {
    console.log(this);
  }
};

people.iAm(); //{ name :  " dohee " , iAm :  ƒ  iAm () }

const result = people.iAm;
result(); // window