[Javascript] this 할당하기

자바스크립트에서 함수 호출의 방식에 따라서 this에 어떤 객체가 할당되는지 달라진다.

 

일단 기본적으로 this는 전역객체(Window)를 가리킨다.

특정한 명시적인 객체의 바인딩이나 객체안에 속해 정의된 매서드 등등이 아니고서는 전역객체를 가리킨다.

 

그렇다면 this에 특정한 객체가 할당되기 위해서는 어떠한 방식을 해야할까?

 

1. 객체 안의 매서드로 함수를 할당

const data = {
  name : 'Alice',
  getName : function() {
    console.log(this.name); // Alice
  }
}

data.getName();

위의 코드 처럼 객체 data 안에 정의된 매서드 getName 함수에서 this는 data 객체를 가리킨다. 따라서 this.name으로 Alice라는 값이 나타난다. 

 

2. 생성자 함수를 사용했을 때

function Grade(english) {
  this.english = english;
}

const grade = new Grade(80);
console.log(grade.english); //80

new 연산자와 사용된 생성자 내의 this는 생성자의 객체에 바인딩 된다.

만약에 new 연산자 없이 사용하면 일반함수로 생각하기 때문에 전역객체로 바인딩 된다.

 

3. call, apply, bind 사용

call, apply, bind는 모두 함수에 명시적으로 어떤 객체를 this에 바인딩할지를 알려주는 역할을 한다.

call과 apply, bind는 미묘한 차이를 가지고 있는데 

call과 apply는 우선 사용을 하면 해당 함수를 즉시 실행해준다.

반면에 bind는 객체를 this에 바인딩하고 함수를 다시 리턴하기 때문에 다시 함수를 호출해주어야 해당 함수가 동작하게 된다.

 

call과 apply의 차이는 call은 함수에 들어갈 인자를 병렬식으로 나열하는 반면에, apply는 array의 형태로 전달을 한다.

const Grade = function(english, math) {
  this.english = english;
  this.math = math
};

const data = {
  korean : 30
}

//apply 사용 경우
Grade.apply(data, [60, 50]);
//call 사용 경우
Grade.call(data, 60, 50);
//bind 사용 경우
Grade.bind(data, 60, 30)(); //()처럼 즉시실행할 수 있도록 처리해줘야 데이터에 바인딩이 될 수 있음.

console.log(data); //{korean: 30, english: 60, math: 50}

 

4. Arrow function (화살표 함수) 사용

ES6부터 소개된 화살표 함수는 () => {} 와 같은 방식으로 사용을 할 수 있는 함수 표현이다.

이 함수에서의 this는 명시적인 바인딩처리(call, apply, bind)를 하지 않아도 상위의 객체를 가리킨다.

이를 lexical this라고도 한다.

const getValues = () => {
  this.value = 30;
  setTimeout(() => {
    console.log(this.value); // 상위 스코프의 객체가 this에 바인딩됨
  }, 100);
}

getValues(); // 30