this - 화살표함수와 일반함수

자바스크립트에서의  this는 꽤나 중요한 개념이다.

 

우선  this를 사용하는 간단한 예제 코드는 다음과 같다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const dumbo = new Person('dumbo', 20);
console.log(dumbo.name); // dumbo
console.log(dumbo.age);  // 20

자바스크립트에서는 위와 같이 함수안에서 this를 사용할 수 있습니다.

dumbo에 new키워드를 이용해 인스턴스를 생성했고 매개변수로  dumbo,20을 담았습니다.

이렇게 new를 통해 새로운 인스턴스를 생성하면 Person에서의 this 는 dumbo가 됩니다.

(dumbo.name 으로 값을 불러낼 수 있다.)

 

일반함수에서의 this는 함수를 호출한 주체를 가르킵니다!

한번 아래의 코드를 살펴 봅시다.

function Fn() {
  this.value = 0;
  this.add = function(amount)={
  	this.value += amount
  }
}

const newFn = new Fn();
console.log(newFn.value); //0
newFn.add(5);
console.log(newFn.value);//5
const add2 = newFn.add;
add2(5);
console.log(newFn.value);//5

 코드에서 보시면 일반함수에서의 this는 함수를 호출한 주체라는 것아 보입니다.

const add2 = newFn.add;
add2(5);
console.log(newFn.value);//5

add2를 했을때의 함수의 주체는 newFn이 아닙니다.

그렇기에 10이 아닌 5가 나오는 것입니다.

add2(5)에서는 따로 주체가 없기때문에 이럴경우에는 기본 주체인 window를 가르킵니다.

 

그런데 화살표함수에서는  this의 바인딩이 일반함수와 다릅니다.

화살표 함수에서의 this  는 화살표함수가 생성될 당시의  this 를 가르킵니다.(고정됩니다)

add함수를 누가 호출하는지는 중요하지 않단 말입니다!

function Fn() {
  this.value = 0;
  this.add(amount)=>{
  	this.value += amount
  }
}

const newFn = new Fn();
console.log(newFn.value); //0
newFn.add(5);
console.log(newFn.value);//5
const add2 = newFn.add;
add2(5);
console.log(newFn.value);//10