[JS] 🧃this 정리 (ft. bind, call, apply)

😮 this: "누가 나를 부른 거야?"

선언이 아닌, 호출에 따라 달라지는 this를 알아보자💨

🧃 단독 this

그냥 this를 호출하는 경우에는 global object를 가르킨다.

console.log(this); // window
// strict mode => window

---

🧃 함수 안 this

함수 안 this는 함수의 주인인 window객체에 바인딩 된다.

function a() {
  return this;
}

console.log(a()); // window
/* strict mode => undefined
   (함수 내 this의 디폴트 바인딩이 없기 때문) */

---

🧃 객체의 메서드 안 this

메서드 호출 시 this는 메서드 내부 코드에서
사용된 해당 메서드를 호출한 객체로 바인딩 된다.

▷ 예시 1

const objList = {
  b: function () {
      return this;
    }
}

console.log(objList.b()); // objList

▷ 예시 2

const user = {
  firstName: "TATA",
  lastName: "V",
  fullName: function () {
    return this.firstName + "-" + this.lastName;
  },
};

console.log(user.fullName()); // TATA-V

---

🧃 이벤트 핸들러 안 this

이벤트 핸들러에서 this는 이벤트 타겟인 HTML 요소를 가르킨다.

const $btn = document.querySelector("#btn")

$btn.addEventListener("click", function () {
  console.log(this); // #btn
})

---

🧃 클래스 안 this

클래스 내에서 this는 해당 클래스의 인스턴스를 가르킨다.

class User {
  constructor(name) {
    this.name = name;
  }
}

var user1 = new User("TATA");
var user2 = new User("CHIMMY");

console.log(user1.name); // TATA
console.log(user2.name); // CHIMMY

---

🧃 명시적 바인딩을 한 this

bind, call, apply과 같은 명시적 바인딩을
사용했을 때에는 인자로 전달된 객체로 바인딩된다.

function user() {
  return this.name;
}

const objList = { name: "TATA" };
console.log(user.bind(objList)()); // TATA
console.log(user.call(objList)); // TATA
console.log(user.apply(objList)); // TATA

---

🧃 bind - this

bind를 사용하면 함수를 실행하지 않고, 새로운 함수를 반환한다.

첫 번째 인자 값은 함수 내부에서 사용되는 this에 바인딩되고,
두 번째 인자 값부터는 자신을 호출한 함수의 인자로 사용한다.

function data(a, b, c) {
  console.log(this.name);
  console.log(this.squad);
  console.log(a + b + c);
}

const user = {
  name: "TATA",
  squad: "BT21",
};

// 반환된 새로운 함수를 실행해야 원본 함수가 실행된다.
data.bind(user, 1, 2, 3)();
// TATA
// BT21
// 6

그래서 첫 번째 인자에 null을 넣어 함수 자체를 복사할 수 있다.

function data(a, b, c) {
  console.log("이것이 바로");
  console.log("bind");
  console.log(a + b + c);
}

data.bind(null, 1, 2, 3)();
// 이것이 바로
// bind
// 6

---

🧃 call - this

call을 사용하면 함수를 실행하고,
첫 번째 인자 값은 함수 내부에서 사용되는 this에 바인딩되고,
두 번째 인자 값부터는 자신을 호출한 함수의 인자로 사용한다.

function data(a, b, c) {
  console.log(this.name);
  console.log(this.squad);
  console.log(a + b + c);
}

const user = {
  name: "TATA",
  squad: "BT21",
};

data.call(user, 1, 2, 3);
// TATA
// BT21
// 6

---

🧃 apply - this

apply를 사용하면 함수를 실행하고,
첫 번째 인자 값은 함수 내부에서 사용되는 this에 바인딩되고,
두 번째 인자 값인 배열은 자신을 호출한 함수의 인자로 사용한다.

function data(a, b, c) {
  console.log(this.name);
  console.log(this.squad);
  console.log(a + b + c);
}

const user = {
  name: "TATA",
  squad: "BT21",
};

const arrNum = [1, 2, 3];

data.apply(user, arrNum);
// TATA
// BT21
// 6

// But, 요즘엔 apply를 사용하지 않고, 스프레드와 call을 사용한다.
data.call(user, ...arrNum);
// TATA
// BT21
// 6

---

🧃 화살표 함수 안 this

화살표 함수를 사용하면 외부의 this를 가져온다.

▷ setTimeout 일반 함수

const user = {
  firstName: "TATA",
  lastName: "V",
  fullName: function () {
    setTimeout(function () {
      console.log(this); // window
      console.log(this.firstName + "-" + this.lastName);
    }, 3000);
  },
};

user.fullName(); // undefined

▷ setTimeout 화살표 함수

const user = {
  firstName: "TATA",
  lastName: "V",
  fullName: function () {
    setTimeout(() => {
      console.log(this.firstName + "-" + this.lastName);
    }, 3000);
  },
};

user.fullName(); // TATA-V

👉 this 정리 잘 된 블로그 보러가기