JavaScript / This

---

---

자바스크립트 This와 관련된 내용을 기록합니다.

관련된 내용을 공부하면 계속해서 update합니다.

 

2022.12.13 (별코딩 - this)

 

자바스크립트의 this는 어떠한 객체를 가리킴

이 객체는 상황에 따라 계속해서 변화함

기본적으로 this는 함수를 호출한 객체임

 

전역에서의 this -> window

 

[함수 문맥에서의 this]

'use strict'

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

main();

함수내부의 this는 함수를 어떻게 호출했는지에 따라 값이 달라짐

기본적으로 this는 함수를 호출한 객체를 의미함

누가 함수를 호출했는가?

 

기본적으로 함수를 호출할땐 this값이 전역을 가리키지만,

strict 모드에서 함수를 그냥 호출할땐 this가 undefined을 나타냄

 

[객체 메서드에서 this]

const object = {
	name:'lee',
    main:function(){
    	console.log(this);
    },
};

objcet.main();

위에서 말했듯이 this는 자신을 부른 객체를 나타내기 때문에 콘솔의 값은

{name:'lee', main:f}가 나오게됨

 

이를 통해 메서드에서 내부의 변수에 접근할때 this를 활용하기 유용함

ex) this.name => 'lee'

 

this는 만들어진 위치에서 판단되는것이 아닌, 직접적으로 호출한 것을 기준으로 인식된다.

 

 

[bind]

하지만 this값을 어떻게 호출하든 고정을 시키고 싶다면 bind를 사용함

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

const mainBind = main.bind({name:'lee'});

mainBind();

const new_obj = {
mainBind
};

new_obj.mainBind();

이렇게 호출하게되면 bind에 의해 log에는 {name:'lee'}가 찍힘

아래있는 new_obj의 로그또한 bind에 의해 {name:'lee'}가 나타남

 

bind는 새로운 함수를 반환함.

bind가 뒤에 들어온 객체를 this로 설정한 새로운 함수를 반환하는것임.

 

주의할 점은 bind에 다시 bind할 순 없음.

처음에 binding된 친구만 this로 인식해버림.

 

[이벤트 처리기에서 this]

const button = document.getElementById('btn');

button.addEventListener('click',function(){
	console.log(this);
});

계속 위에서 언급했던대로 this는 부른 객체,

즉 여기서는 button을 의미하기 때문에 button(event.target)인 

<button id="btn">버튼</button>을 출력함