[Javascript] this 이것 뭐에요? 자바스크립트 this 정복하기

what is this

1주차 세션에선 웹개발의 기본중에 기본! 순정! HTML, CSS, JAVASCRIPT 개념에 대해서 배워봤는데요. 이 세션과 연관지어 같이 더 풀어볼 수 있는 소재를 찾아보다가,, javascript에서 종종 쓰이는 this에 대해 정리해보려고 합니당~ 다른 언어에서도 this를 쓰는데 각자 돌아가는 작동 방식도 조금씩 달라서, javascript 내에선 어떻게 사용하고 어떤 개념이 있는지 알아보도록 합시다. 그럼 출~바알 🚀

 

동적 바인딩

호출과 동시에 this가 결정됩니다. 특히 기본적으로 함수는 동적으로 this가 바인딩됩니다!

 

우선 기본 this는 뭘 가리키고 있을까요?? 한번 콘솔로 확인해보시져

(1)

console.log(this)

그냥 아무것도 없는 상태에서 전역적으로  이래버리면 이 this 키워드는 window를 가리킵니다.

 

(2)

function hamsu(){
	console.log(this)
}
//함수 호출
hamsu();

함수 선언 후, 함수 내에서 this를 불러보면, 여전히 window라고 출력되는 걸 볼 수 있습니다

 

즉, 기본 this는 그냥 window입니다.

 

그럼 ...

Window가 뭔데

window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체!
전역변수 뿐 아니라, 우리가 많이 쓰는 alert(), console.log()등의 자바스크립트 함수들을 보관하는 큰 오브젝트 형태의 보관소인거죠!

 

 

 

그럼 이 this를 어떻게 활용하고 쓰면 될까??

아무것도 처리 안한 this는 제일 상위(?) 오브젝트인 window를 가리키는 것처럼,

이 this가 하나의 객체 자료형이나 특정함수에 들어가게 되면 그 영역내에서의 메소드를 담고 있는 특정 객체를 가리키게 됩니다.

 

총 3개의 상황에서 this가 무엇을 가리키는 지 봐봅시다

 

1. 메서드 내부

const sopt = {
    name: ‘솝트’,
    sweb: function () {
        console.log(this);
    }
};

sopt.sweb();
// 출력: { name: '솝트', sweb: [Function: sweb] }

이렇게 this는 sweb메서드를 호출하는 전체 큰 객체인 sopt를 가리키게 됩니다. 

=> sopt.sweb()를 호출하는데, 이 sweb은 sopt객체에 "의해" 호출되었기에 이 sopt를 this가 가리킴

 

2. callback 함수

const sopt = {
    name: '솝트',
    sweb: function () {
        console.log(`안녕하세요, ${this.name}입니다.`);
    }
};

function executeCallback(callback) {
    callback();
}

executeCallback(sopt.sweb);
// 출력: 안녕하세요, undefined입니다.

아까 상황처럼 여전히 sopt.sweb은 원래 sopt 객체 내의 메서드입미다.

하지만 executeCallback 함수에 전달되는 순간, sweb함수는 전역 공간에서 호출되게 되면서 일반 함수처럼 동작하게 됩니다. 즉, 더 이상 sopt 객체를 참조하지 못하게 됩니다. 그래서 이 때의 this는 기본 window를 가리키게 되고, 거기에 있는 this.name을 불러오지 못하게 됩니다 (없으니까) 

 

** 대신, 전역 객체를 가리키거나, 호출한 객체를 가리키는 등 상황에 따라 동작이 달라지기 때문에 주의

 

3. 생성자 함수

function sopt(name, cnt) {
    this.name = name;
    this.cnt = cnt;
}

const sopt = new sopt('스웹', 35);
console.log(sopt); 
// 출력: sopt { name: '스웹', cnt: 35 }

여기서

sopt는 생성자 함수!  this는 새로운 객체를 가리키는데, 이 객체는 new 키워드로 생성된 인스턴스를 가리키게 됩니다.

this.name = name과 this.cnt = cnt를 통해 sopt라는 객체에 name과 cnt라는 속성이 추가됨.! 결국 sopt 객체는 name: '스웹'과 cnt: 35를 속성으로 가진 객체가 된다.

 

여기서 짱짱 중요한 점은, new 키워드가 없으면 this가 전역 객체를 가리키게 된다는 것!

그래서 생성자 함수 내에서 new 없이 호출하게 되면 this가 window를 가리키게 돼서 의도치 않은 결과가 나올 수 있으니 조심!  밑에와 같은 상황이 될 수 있슴!!

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

sopt('스웹', 35);
console.log(window.name); // '스웹' 출력
console.log(window.cnt);  // 35 출력

new 없이 함수 sopt를 호출했기 때문에, this는 전역 객체인 window를 가리키게 됨

 

 

 

 

---------------

 

자바스크립트 this에 대한 기본 개념과, 각 상황에서 this가 어떻게 작동되는지 알아보았는데요!

this 이젠 뚝딱뚝딱 잘 사용할 수 있겠져? 

급한 마무리