[Javascript] this와 화살표 함수

this 란?

• javascript에서의 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

 

 

this의 특징

📌 this 바인딩

• this가 가리키는 값(this 바인딩)은 함수가 선언된 방식이 아니라 함수를 호출하는 방식에 의해 동적으로 결정됨

// 1. 전역
console.log(this); // window => 전역 객체

// 2. 일반 함수 내부
function square(number) {
  console.log(this); // window => 전역 객체
  return number * number;
}
square(2);

// 3. 객체 메서드 내부
const person = {
  name: 'Lee',
  getName() {
    console.log(this); // {name: 'Lee', getName: ƒ} => 메서드를 호출한 객체
    return this.name;
  },
};
console.log(person.getName()); // Lee

// 4. 생성자 함수
function Person(name) {
  this.name = name;
  console.log(this); // Person {name: 'Lee'} => 생성자 함수가 생성할 인스턴스
}
const me = new Person('Lee');

여러 상황에서 this가 참조하는 객체

 

📌 apply, call, bind 메서드

• apply, call, bind 메서드는 Function.prototype의 메서드이므로, 모든 함수가 상속받아 사용할 수 있음

• apply, call 메서드는 함수를 호출할 때 쓰이며, 첫 번째 인자로 전달한 객체를 호출한 함수의 this에 바인딩함
  
  • apply 메서드는 호출할 함수의 인자를 배열의 형태로 전달
  • call 메서드는 호출할 함수의 인자를 첫 번째 인자 이후에 쉼표로 나열하여 전달

function getThisBinding() {
  console.log(arguments);
  return this;
}

const thisArgs = { a: 1 };

console.log(getThisBinding.apply(thisArgs, [1, 2, 3]));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1} => getThisBinding의 return 값

console.log(getThisBinding.call(thisArgs, 1, 2, 3));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1} => getThisBinding의 return 값

apply와 call 메서드

 

• bind 메서드는 메서드의 this와 메서드 내부의 중첩함수, 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 사용됨
  • this가 새로 바인딩된 함수를 반환하므로, 함수를 실행하려면 명시적으로 호출해야함.

function getThisBinding() {
  return this;
}

const thisArgs = { a: 1 };

// thisArgs로 this가 바인딩된 새로운 함수를 생성하여 반환한다.
console.log(getThisBinding.bind(thisArgs));     // getThisBinding 

// 함수를 실행하려면 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArgs)());   // {a: 1}

 

 

 

화살표 함수(Arrow Function)

📌 화살표 함수의 등장 배경

• 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위해 등장

 

📌 화살표 함수의 특징

• 일반 함수는 호출 방식에 따라 동적으로 this에 객체가 바인딩 되지만, 화살표 함수는 함수를 선언할 떄 this에 바인딩할 객체가 정적으로 결정
• 화살표 함수 내부의 this는 언제나 상위 스코프의 this를 가리킴

const fn = {
  title: 'Hello World!',
  tags: [1, 2],
  showTags() {
    // 객체 내부 메서드에서의 this = 객체를 가리킴
    this.tags.forEach(function (tag) {
      console.log(tag);
      console.log(this); // window
      // => 콜백 함수가 일반 함수로서 호출되어 전역 객체를 가리킴
    });
  },
};
fn.showTags();

const arrfn = {
  title: 'Hello World!',
  tags: [1, 2],
  showTags() {
    this.tags.forEach((tag) => {
      console.log(tag);
      console.log(this); // {title: 'Hello World!', tags: Array(2), showTags: ƒ}
      // 콜백 함수가 arrow function인 경우 상위 스코프의 this를 가리킴
    });
  },
};
arrfn.showTags();