[JavaScript] JavaScript - this

This

JavaScript의 this를 공부해보자 MDN

-. 함수를 호출하는 방법에 의해 결정된다

const car = {
  name: 'BMW',
  getName: function() {
      console.log(this)
  }
}
car.getName();  //{name: 'BMW', getName: function~}
// = car -> getName()

const globalCar = car.getName;
globalCar();  //Window~
// = getName()

const car2 = {
  name: 'BENZ',
  getName: car.getName
}

car2.getName();  //{name: 'BENZ', getName: function~}

-. bind()

bind() 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다. 즉 함수가 가르키는 this만 바꿔주고 그 함수를 복사해 새로운 함수를 만들어 리턴시켜주는 것
func.bind(thisArg)(parama1, param2,...)

car2.getName(); //{name: 'BENZ', getName: funciton~} 
const boundCar = car2.getName.bind(car)
boundCar();  //{name: 'BMW', getName: function~}

-. call(), apply()

call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다.
func.call(thisArg, param1, param2,...)
apply()메소드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다.
func.apply(thisArg, [params])

car2.getName.call(car) //{name: 'BMW', getname: function~}
car2.getName.apply(car) //{name: 'BMW', getname: function~}

• 세가지 모두 this를 바꿀 수 있다.
• apply는 인수를 배열로 받는 call과 같다.

-. 화살표 함수

전역 공간의 this: 전역 객체
메소드 호출 시 메소드 내부의 this: 해당 메소드 호출 객체
함수 호출 시 함수 내부의 this: 정의되지 않음

• 지정되지 않은 this는 자동으로 전역객체를 바라보기에 함수 내부 this는 전객체가 됨(JS 설계상 오류)
• cat.foo() -> foo2() -> 전역객체 내 name 존재X -> undefined

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = function() {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();	// undefined

• 화살표 함수 내 this가 없기에 상위 환경으로 거슬러 올라가며 검색(변수를 찾거나 최상위로 올라가면 멈춤)

function으로 선언한 함수가 호출방법(메소드 or 함수 자체)에 따라 동적으로 this가 바인딩되는 반면, 화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩됩니다.

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = () => {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();	// meow

🚨주의해서 쓰자

-. 메소드

화살표 함수는 자신의 this를 가지고(“bind” 바인드)있지 않습니다.

const cat = {
  name: 'meow',
  callName: () => console.log(this.name)
}

cat.callName();	// undefined

-. 생성자 함수

화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

-. 이벤트 핸들러로 선언

이미 this의 값이 정해져있는 콜백함수의 경우, 화살표 함수를 사용하면 기존 바인딩 값이 사라지고 상위 스코프(이 경우엔 전역 객체)가 바인딩되기 때문에 의도했던대로 동작하지 않을 수 있습니다.

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this);	// Window
  this.innerHTML = 'clicked';
});

button.addEventListener('click', function() {
   console.log(this);	// button 엘리먼트
   this.innerHTML = 'clicked';
});