[TIL]07.자바스크립트 this, this바인딩

자바스크립트에선 this라는 키워드가 존재한다. 다른 언어에서도 자주 볼 수 있는 키워드인데 자바스크립트에서 this는 가리키는 객체가 

상당히 혼란스러운 경우가 많다.

 

function add(a, b) {
    console.log(this, a, b);
}

const obj1 = {
    name : "obj1",
    func : function () {
    	console.log(this);
    }
}

여기 형태에 함수가 있다. add는 평범하게 함수 선언식으로 선언된 함수이다. func는 obj1에 속해있는 함수이다.

이런한 형태일 때 각자 this가 가리키는 게 무엇인지 생각해 보자.

 

 

브라우저 콘솔에서 add함수를 실행시켜 보았다. 10과 20은 우리가 전달한 값이고 window라는 정체불명의 객체가 출력되는 것을 볼 수 있다.

이것은 obj1의 func를 실행한 화면이다. 여기서는 window객체를 찾아볼 수 없다. 무엇이 다른 걸까???

 

this는 호출의 주체가 누구냐에 따라서 결정된다.

add함수는 호출 주체가 없는 그냥 함수이고 obj1은 호출주체가 있는 메서드이다. 

• 호출 주체가 없는 함수
  • 전역 객체를 가리킨다
    • 브라우저 => window객체
    • node => global객체
• 호출 주체가 있는 메서드
  • 해당 객체를 가리킨다. => 위 예시에선 obj1을 가르킨다.

this를 우회하는 방법

• 화살표 함수 (this를 바인딩하지 않는 함수)
  • 일반 함수와 화살표 함수의 가장 큰 차이는 this Binding 여부

콜백함수의 this

• 콜백함수는 기본적으로 전역객체를 바라본다.
• 콜백함수에 this를 별도로 지정한 경우는 예외이다.

명시적으로 this를 바인딩하는 방법

• call 함수 ⇒ 해당함수를 즉시 실행해 주되 맨 앞 매개변수에 this로 지정될 객체를 지정

// call 함수로 명시적 바인딩 하기
const func = function (a, b, c) {
	console.log(this, a, b, c);
}

func.call({명시적으로 객체를 지정해준다}, 4, 5, 6);

• apply 함수 ⇒ 해당함수를 즉시 실행해주되 맨 앞 매개변수에 this로 지정될 객체를 지정 (매개변수를 대괄호로 묶는다.)

// call 함수로 명시적 바인딩 하기
const func = function (a, b, c) {
	console.log(this, a, b, c);
}

func.apply({명시적으로 객체를 지정해준다}, [4, 5, 6]);

• bind 함수 ⇒ 즉시 호출하지는 않는다. 바인딩해서 새로운 함수로 리턴한다.

// call 함수로 명시적 바인딩 하기
const func = function (a, b, c) {
	console.log(this, a, b, c);
}

const func2 = func.bind({명시적으로 객체를 지정해준다});