this 개념 정리

"javascript에서 this는 함수를 호출한 객체이다"

 

전역에서 this 호출 시 window객체를 가리킨다.

function main(){
	console.log(this);
}
main(); //와 window.main()은 같다.
//window객체를 가리킨다.

'use strict'를 사용하면 함수를 호출한 객체를 명시하지 않으면 undefined 값을 반환한다.

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

object.main();
//이렇게 하면 main함수를 호출한 object객체를 this가 가리킨다.
//만약 const main2 = object.main;
//main2();
//이렇게 호출한다면 main2변수에 담긴 함수를 전역에서 호출했기 때문에 window객체를 가리킨다.

 

this값을 bind로 지정할 수 있다.

this값으 bind() 함수 안의 객체로 고정시켜 줄 수 있다.

function main(){
	console.og(this);
}
const mainBind = main.bind({ name: 'hi'});
mainBind();

//{name: 'hi'}

bind함수의 주의사항

한번 바인딩 된 함수는 또다시 바인딩할 수 없다.

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

const mainBind = main.bind({ name: 'hi'});
const mainBindBind = mainBind.bind({});
//mainBindBind는 무시당한다.

DOM요소를 다룰 때 this의 특징에 대해 알아봅시다.

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

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

//event listener로 호출된 함수의 this는 이벤트를 발생시킨 target(요소)을 가리킨다.
//true

 

마지막으로 전통적인 함수 문법 과 화살표 함수 문법의 차이점

전통적인 함수 문법

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

• 호출 번법에 따른 this 변화
• this를 고정하기 위해 bind() 사용

화살표 함수 문법

const main = () => {
	console.log(this);
}

• 더 간결한 함수 선언 문법
• this가 호출에 따라 바뀌지 않음 (동적인 this에 대한 고민을 상당히 없애주는 장점)
• this를 외부에서 가져옴 (그 함수를 감싸는 스코프를 가져와서 사용)

화살표 함수가 전통적인 함수를 전부 커버할 수 없기 때문에 두 가지 문법의 특성을 알고 있는 것이 중요하다.