🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드

최대한 간단하게 정리, 추후에 보면서 스스로 설명

⭐⭐⭐ JavaScript this 2nd

bind 메서드

call 메서드와 유사하지만, call 메서드는 객체와 인수를 받아 바로 호출하는 반면 bind의 경우 해당 객체 혹은 인수를 받은 함수를 반환

var func = function (a, b, c) {
  console.log(this, a, b, c);
};

var bindFunc = func.bind({ test: 1 });
bind(1, 2, 3);
// {test: 1} 1 2 3 출력

// 이렇게 bind 메서드가 적용된 함수는 확인이 가능(코드를 추적하기에 용이)

console.log(func.name); // func
console.log(bindFunc.name); // bound func

메서드 내부에서 함수 호출 시 메서드의 this를 바라보게 하기

var objCall = {
  method: function () {
    console.log(this);
    var inner = function () {
      console.log(this);
    };
    inner().call(this); // 메서드의 this, 즉 objCall 객체를 전달하며 호출
  },
};

var objBind = {
  method: function () {
    console.log(this);
    var inner = function () {
      console.log(this);
    }.bind(this); // 애초에 함수를 할당할 때, 메서드의 this인 objBind 객체를 전달
    inner();
  },
};

➕ 콜백함수를 인자로 받는 메서드 중 일부는 this로 지정할 객체를 인자로 같이 받음

var arr = [1, 2, 3];

// 1. 메서드 내에서 콜백함수가 호출되므로 this -> window
arr.forEach(function (value) {
  console.log(value);
  console.log(this);
});

// 2. 콜백함수가 바인딩할 this를 전달하였으므로 this -> {test: 1}
arr.forEach(
  function (value) {
    console.log(value);
    console.log(this);
  },
  { test: 1 },
);

/* 3. 2번에서 콜백을 화살표함수로 한다면? => this -> window
화살표함수는 실행 컨텍스트에서 Thisbinding 과정이 없기 때문
즉, 바인딩할 객체를 전달해줘도 바인딩 자체를 하지 않음! */
arr.forEach(
  (value) => {
    console.log(value);
    console.log(this);
  },
  { test: 1 },
);

undefined