[JS]다양한 상황에서의 this 바인딩_2

JavaScript의 this 바인딩에 대해 알아보자

오늘의 키 포인트

1.call() & apply()

1-1

call() 과 apply() 메서드는 어떤 함수를 다른 객체의 메서드 처럼 호출할 수 있게 합니다.
this를 특정 객체에 바인딩하여 함수를 호출하는 역할을 합니다.

 const obj = { name:'javascript' };
 function greeting{ 
 	return 'Hello ${this.name}'; 
 }
 console.log(greeting.call(obj)); //'Hello javascript'

==>call() 메서드는 첫 번째 인자로 this로 바인딩할 객체를 지정합니다. obj객체를 call()메서드의 첫번째 인자로 넘겨 this로 바인딩 하였습니다. greeting() 함수는 obj의 메서드 처럼 사용할 수있어서 this를 통해 obj의 프로퍼티인 name에 접근할 수 있게 됩니다.

${this.name} 는 즉 ${obj.name}으로 인식이 됩니다. 따라서 console.log의 결과 값이
'Hello javascript'가 나오게 됩니다.

1-2

call() 메서드는 또한 호출함수로 인자를 전달할 수도 있습니다.

 const obj = { name:'lee' };
 function getUserInfo( age, country ){ 
 	return 'name: ${this.name}, age:${age}, country: ${country}';
 }
 console.log(getUserInfo.apply(obj,[20,'korea'])); //'name: lee, age:20, country: korea';

==>call() 메서드는 첫 번째 인자 이후의 인자들은 모두 호출하는 함수로 전달됩니다.
apply()메서드는 call()메서드와 동일하지만 호출하는 함수에 전달할 인자들을 배열 형태로 전달해야합니다.

 const obj = { name:'lee' };
 function getUserInfo( age, country ){ 
 	return 'name: ${this.name}, age:${age}, country: ${country}';
 }
 console.log(getUserInfo.call(obj,20,'korea')); //'name: lee, age:20, country: korea';

1-3

함수의 this 바인딩을 변경할 수 있는 또 다른 방법으로 bind() 메서드를 사용하는 방법이 있습니다.
앞서 살펴본 call() 과 apply() 메서드와는 두 가지 차이점이 있습니다.

2.화살표 함수와 렉시컬 this

화살표 함수는 this를 바인딩하지 못한다고 합니다.
따라서 화살표 함수에서의 this는 기존 규칙과 다르게 동작합니다.

const obj = {
	lang : 'javascript';
    greeting:() =>{
    return 'hello ${this.lang}';
	}
}
console.log(obj.greeting()); //'hello undefined'

==>greeting() 메서드를 화살표 함수로 정의했습니다. 하지만 this를 통해 lang 프로퍼티 접근은 불가합니다. 이는 화살표 함수의 렉시컬 this가 obj가 아닌 obj를 둘러싸고 있는 전역 객체를 가리키기 때문입니다.