자바스크립트 - 실행 컨텍스트, This, 바인딩

실행 컨텍스트(Execution Context)

• 실행 컨텍스트란 코드가 실행 될 때 환경 정보들을 모아둔 객체입니다
• 실행 컨텍스트는 Last-In-First-Out인 Call Stack에 쌓아 올려지며 실행이 완료되면 빠지게 됩니다
• 코드의 환경과 순서를 보장합니다

실행 컨텍스트

 

Active Context: 전역 -> A 함수 -> B 함수 -> A 함수

 

Acitve한 컨텍스트는 콜스택 맨 위의 컨텍스트 입니다

현재 실행 컨텍스트에서 필요한 값을 찾고 없으면 하위 컨텍스트로 이동하며

전역 실행 컨텍스트까지도 찾지 못하면 에러를 발생시킵니다

실행 컨텍스트는 스택에서 제거되도 메모리에서 바로 제거되지 않는데, 추후에 참고해야 할 수도 있기 때문입니다

Garbage Collector가 지켜보다가 더 이상 사용되지 않으면 자동으로 삭제해 줍니다

 

This

this 바인딩은 실행 컨텍스트에 따라 결정됩니다

함수를 호출한 컨텍스트를 가리키며 함수가 실행 될 때 함수 내부에서 사용됩니다

var a = 1;
console.log(a); // 출력: 1
console.log(this.a); // 출력: 1

• this는 부르는 상황마다 다르게 동작합니다
• this 바인딩 우선순위: new 바인딩 > 암시적 바인딩 > 명시적 바인딩 > 기본 바인딩

 

기본 바인딩

• 함수에서 단독 호출 시에는 Global Binding

// 단독 호출 전역 실행 컨텍스트

function thisFunc(){
	console.log(this);
}

thisFunc();  // 전역 객체 또는 undefined(엄격 모드)

암시적 바인딩

• 객체에 메서드로 함수가 호출될 때 'this'는 그 객체에 바인딩됩니다
• Object 내부에서 쓰면 자기 자신을 나타냅니다

const obj = {
	name: 'Judy',
	getName(){
		return this.name;
	}
 }
 
 console.log(obj.getName());  // 출력: Judy

명시적 바인딩

apply / call

• 함수 호출 시 첫번째 인자로 this로 사용할 객체를 전달합니다
• 두 함수는 동작 방식이 동일하나 인수 전달의 차이가 있습니다
• 사용 즉시 호출, 무기명 호출

function introduce(name, interest) {
  console.log(`Hello! My name is ${name} and I like ${interest}.`);
}

const user = {
  name: 'Judy',
  interest: 'JavaScript'
};

// call 사용
introduce.call(user, user.name, user.interest); 

// apply 사용
introduce.apply(user, [user.name, user.interest]);  // 배열로 인자값들을 넘겨준다

bind 

• 첫번째 인자값을 전달된 객체에 this를 고정한 새로운 함수(익명 함수)를 반환합니다
• 일급함수로서 리턴됩니다
• 이 함수를 필요에 따라 재사용 할 수 있습니다

function greet() {
  console.log(`Hi, I am ${this.name}.`);
}

const user = {
  name: 'Maie'
};

// bind 사용
const userGreet = greet.bind(user);
userGreet();

new 바인딩

• 생성자 함수를 사용하여 새로운 객체를 생성할 때 발생하는 바인딩입니다
• 'new' 키워드와 함께 호출할 때, 생성되는 새 객체에 'this'가 바인딩 됩니다

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const student1 = new Person('Judy', 25);

console.log(alice); // Person { name: 'Judy', age: 25 }

 

화살표 함수 this

• 함수가 호출되는 방식에 따라 this가 결정됩니다
• 화살표 함수가 선언될 당시의 상위 Scope 의 this를 참조합니다
• this 바인딩 자체가 없기 때문에 call, apply, bind 모두 사용 불가능합니다

const obj = {
	name : 'Judy',
	getName: () => {
		return this.name; // obj가 아닌 Global을 반환
	}
}

console.log(obj.getName());