A Developing Developer

JavaScript 에서 this 키워드 본문

개발 상식

JavaScript 에서 this 키워드

H-JJOO 2023. 2. 20. 20:17

JavaScript 에서 this 키워드는 현재 실행 중인 함수 또는 메소드 내에서 현재 객체를 참조하는 데 사용된다.

this는 함수의 호출 방법에 따라 결정된다.

 

아래 예시 코드를 살펴보면 this 키워드를 사용하여 현재 객체를 참조하는 방법을 보여준다.

// 예시 객체 생성
const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

// fullName() 메소드 호출
console.log(person.fullName()); // "John Doe"

위 코드에서 person 객체의 fullName 메소드 내에서 this 키워드를 사용하여 person 객체를 참조한다.

person.fullName() 메소드가 호출될 때, this는 person 객체를 참조하므로, this.firstName은 person 객체의 firstName 속성을 참조하고 this.lastName은 person 객체의 lastName 속성을 참조한다.

 

다음 예시 코드를 보면, this의 값이 함수 호출에 따라 달라진다는 것을 보여줍니다.

// 예시 함수 정의
function myFunction() {
  console.log(this); 
}

// 함수 호출
myFunction(); // window object (브라우저에서 실행 시)

위 코드에서 myFunction 함수가 호출될 때, this는 전역 객체인 window를 참조한다.

이는 함수가 어떤 객체의 메소드로 호출되지 않았기 때문이다.

 

그러나, 아래 코드에서 myFunction 함수가 person 객체의 메소드로 호출될 때, this는 person 객체를 참조한다.

// 예시 객체 생성
const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

// 함수 호출
console.log(person.fullName()); // "John Doe"
 

위 코드에서 person.fullName() 메소드가 호출될 때, this는 person 객체를 참조하므로, this.firstName은 person 객체의 firstName 속성을 참조하고 this.lastName은 person 객체의 lastName 속성을 참조한다.

 

'개발 상식' 카테고리의 다른 글

eager 과 lazy loading  (0) 2023.02.21
IoC 와 DI  (0) 2023.02.20
[Javscript] 호이스팅(Hoisting)  (0) 2022.11.28
개구간, 폐구간  (0) 2022.11.23
seed value  (0) 2022.11.22