화살표 함수 심화

일반함수의 this와 화살표 함수의 this의 차이점을 알아본다.

* 메서드 : 객체의 속성으로 만들어진 함수를 의미

 

함수가 선언된 위치와 상관없이 호출된 객체를 가르키는 this의 특징을 다이나믹 바인딩 혹은 런타임 바인딩이라고 불림

왜냐하면 일반함수가 호출되는 런타임 시점에 결정되기 때문이다.

 

일반함수는 누가 호출했는지

화살표함수는 선언된 위치에 의해서 결정이 된다. 해당 위치의 this를 그대로 받아온다.

 

이상적인 일반함수와 화살표함수의 사용법

const object = {
	name: 'hatso',
    main: function () {
    	setTimeout(() => {
        	console.log(this)
    	}, 1000);
        const sayName = () => {
        	console.log(this.name + " 입니다.");
        }
    },
};

object.main();
//1000밀리세컨 후 object객체가 콘솔에 출력
//object.name인 'hatso'+" 입니다."가 콘솔에 출력
//hatso 입니다.

 

정리

일반 함수

• 일반 함수의 this는 함수의 선언 위치에 상관없이, 함수를 호출하는 방법에 따라 달라진다.
• 일반 함수의 this는 함수를 호출한 객체를 가리킨다.

화살표 함수

• 화살표 함수의 this는 함수의 호출 방법에 상관 없이, 함수를 선언한 위치에 의해 결정된다.
• 화살표 함수의 this는 함수를 감싸는 상위 스코프의 this를 그대로 가져와서 사용한다.