JavaScript this함수 / Spread Operator(apply,call 함수)

this란?

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.
• this는 코드 어디서든 참조할 수 있다.
  하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.
• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
• 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• 크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.

this 사용법

1. 함수 안에 this 는 window를 뜻한다.

function 함수(){
  console.log(this)
}
함수(); // window

2. object 자료형 내에 함수안에 this는 부모요소를 뜻한다.

var 오브젝트 = {
  data : 'Kim',
  함수 : function(){ console.log(this) } 
}

오브젝트.함수(); // data : 'kim' , 함수

3. 3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻한다.

function 기계(){
  this.이름 = 'Kim' // 새로 생성되는 오브젝트 이름(key) 값에 값을 넣어주는 기능
}
var 오브젝트 = new 기계();

4. eventlistener 안에서 쓰면 this는 e.currentTarget라는 의미

document.getElementById('버튼').addEventListener('click', function(e){
  console.log(this) // == e.currentTarget
});

apply , call 함수

해당 코드를 보면 call은 보통 함수와 똑같이 인자를 넣고, apply는 인자를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있다.

var example = function (a, b, c) {
  return a + b + c;
};
example(1, 2, 3);
example.call(null, 1, 2, 3); // 6
example.apply(null, [1, 2, 3]); // 6

---

say함수의 this를 변경하고 싶다면, 당연히 this를 대체할 객체가 있어야 한다. 코드를 조금 수정해서 아래와 같이 만들었다.

const obj = { name : 'Tom' };

const say = function(city){
    console.log(`Hello, my name is ${this.name}, I live in ${city}`);
}

say("seoul"); // Hello, my name is , I live in seoul
say.call(obj, "seoul"); // Hello, my name is Tom, I live in seoul
say.apply(obj, ["seoul"]); // Hello, my name is Tom, I live in seoul

call과 apply는 함수를 호출하는 함수이다. 그러나 그냥 실행하는 것이 아니라 첫 번째 인자에 this로 setting하고 싶은 객체를 넘겨주어 this를 바꾸고나서 실행한다.