본문 바로가기

기술면접

JavaScript에서 this

JavaScript에서 this는 현재 실행 컨텍스트를 가리키는 키워드

this의 값은 함수가 호출되는 방식에 따라 동적으로 결정

주로 메서드가 속한 객체를 참조하는 데 사용

4가지 상황에서 각각 다르게 동작,

  • 일반 함수 호출
  • 메서드 호출
  • 생성자 함수 호출
  • 화살표 함수에서의 사용

this가 결정되는 상황

일반 함수 호출

function show() { 
	console.log(this); 
} 
show(); // window 객체 (브라우저 기준)

 

  • 일반 함수로 호출될 때 this는 전역 객체를 가리킴. 브라우저에서는 window, Node.js에서는 global 객체

메서드 호출

const user = { 
	name: 'Kim', 
    greet() { 
    	console.log(`Hello, ${this.name}`); 
    	} 
    }; 
user.greet(); // "Hello, Kim"
  • 객체의 메서드로 호출될 때 this는 해당 메서드를 소유한 객체를 가리킴

생성자 함수 호출

function User(name) { 
	this.name = name; 
}
const user = new User('Kim');

console.log(user.name) // "Kim"
  • new 키워드로 생성자 함수를 호출할 때 this는 새로 생성되는 객체를 가리킴

화살표 함수

const obj = { 
	name: 'Kim', 
    sayHi: () => { 
    	console.log(this.name); 
    },
};
obj.sayHi(); // undefined
  • 화살표 함수는 자신만의 this를 가지지 않고, 외부 스코프의 this를 그대로 상속

 

Ex. this 바인딩을 명시적으로 변경하는 방법

call(), apply(), bind() 메서드를 사용하여 this를 명시적으로 바인딩

  • call(): 즉시 함수를 실행하며 인자를 쉼표로 구분하여 전달
  • apply(): call과 유사하지만 인자를 배열로 전달
  • bind(): 새로운 함수를 반환하며, 영구적으로 this가 바인딩

 

Ex. 화살표 함수를 사용할 때 주의할 점

화살표 함수는 자신만의 this 바인딩을 생성하지 않기 때문에, 객체의 메서드나 프로토타입 메서드로 사용하면 의도치 않은 동작이 발생할 수 있음

특히 이벤트 핸들러나 객체 메서드를 정의할 때는 일반 함수를 사용하는 것이 더 적절

 

실제 사용 예시

실제 개발에서는 주로 클래스의 메서드나 객체의 메서드에서 this를 활용

예를 들어 React 클래스 컴포넌트에서 이벤트 핸들러를 바인딩할 때나,

일반적인 객체지향 프로그래밍에서 인스턴스 메서드를 정의할 때 this를 자주 사용

'기술면접' 카테고리의 다른 글

클로저(Closure)  (0) 2024.10.02
let, const, var의 차이점  (0) 2024.10.02
프레임워크, 라이브러리  (0) 2024.10.02
동기 처리, 비동기 처리  (0) 2024.10.02
JavaScript의 객체지향 프로그래밍  (1) 2024.10.02