[TIL] THIS

 

🧐 THIS

자바스크립트는 Lexical Scope를 사용하기때문에 함수의 상위 스코프가 정의 시점에 평가된다.

하지만 this 키워드는 바인딩이 객체가 생성되는 시점에 결정된다.

 

우리가 단순히,

const testFunction = function () {
  return this;
};
console.log(testFunction()); // Object [global]

일반함수로 실행을 하면 this키워는 global Object에 매핑된다.

 

this를 여러기지로 매핑해보면,

const developer = {
  name: "박재형",
  year: 1992,
  sayHello: function () {
    return `안녕하세요 저는 ${this.name}입니다.`;
  },
};
console.log(developer.sayHello()); // 안녕하세요 저는 박재형입니다.

 

여기서 this.name은 현재 객체를 의미 한다.

this.name을 출력하면 developer.name이 출력된다.

function Person(name, year) {
  this.name = name;
  this.year = year;

  this.sayHello = function () {
    return `안녕하세요 저는 ${this.name}입니다.`;
  };
}
const developer2 = new Person("박재형", 1992);
console.log(developer2.sayHello()); // 안녕하세요 저는 박재형입니다.

 

또 생성자 함수에 new 키워드를 통해 파라미터에 값을 넣어주면 똑같은 값이 나오는 것을 확인할 수 있다.

Person.prototype.backEnd = function () {
  return `${this.name}은 백엔드 개발자 입니다.`;
};
console.log(developer2.backEnd()); // 박재형은 백엔드 개발자 입니다.

prototype에 backEnd라는 함수를 정의해주어도 this키워드는 우리가 실행하는 객체로 잘 매핑된다.

그런데,

Person.prototype.backEnd = function () {
  function frontEnd() {
    return `${this.name}은 백엔드 개발자 입니다.`;
  }
  return frontEnd();
};
console.log(developer2.backEnd()); // undefined은 백엔드 개발자 입니다.

내부에 frontEnd함수를 하나 더 만들고 내부로 this키워드를 옮긴다음 실행해 보면,  this키워드가 undefined로 매핑이 되었다.

이처럼, 객체의 매서드로 함수로, 즉 가장 상위 레벨로 함수를 선언하면 this는 자동으로 실행하는 대상 객체로 매핑되지만, 그 외의 위치에 함수를 선언하게 되면 this는 global에 매핑이 된다.

 

**this 키워드가 어떤걸 타겟하냐는 세가지만 가억하면된다.

• 일반 함수 호출할땐 this가 최상위 객체 (global 또는 window)를 나타낸다.
• 매서드로 호출할땐 호출된 객체를 나타낸다.
• new키워드를 사용해서 객체를 생성했을땐 객체를 나타낸다.

 

**this 키워드를 원하는 값으로 매핑하기

• call()
• apply()
• bind()

function returnName() {
  return this.name;
}
console.log(returnName());

const developer3 = {
  name: "박재형",
};
// returnName함수의 this는 글로벌 즉, undifined이다. 이를 박재형으로 매핑
console.log(returnName.call(developer3)); // 박재형
console.log(returnName.apply(developer3)); // 박재형

 

call()과  apply() 차이

• call()은 컴마(,)를 기반으로 아규먼트를 순서대로 넘겨준다
• apply는 아규먼트를 리스토로 입력해야한다.

function multiply(x, y, z) {
  return `${this.name} / 결과값: ${x * y * z}`;
}
console.log(multiply.call(developer3, 3, 4, 5)); // 박재형 / 결과값: 60
console.log(multiply.apply(developer3, [3, 4, 5])); // 박재형 / 결과값: 60

 

bind()

call()과 apply()는 실행하는 순간 바로 계산되지만, bind() this를 바인딩만 시켜놓고 나중에 실행 할 수 있다.

const laterFunc = multiply.bind(developer3, 3, 4, 5);
console.log(laterFunc); // [Function: bound multiply]
console.log(laterFunc()); // 박재형 / 결과값: 60

 

 

---

참고자료

코드팩토리 유튜브