콜백 함수도 함수로서 호출이다

콜백 함수로 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 "함수로서 호출" 된다!

 

어떤 함수의 인자에 객체의 메서드를 전달하더라도 이는 결국 메서드가 아닌 "함수"일 뿐이다.

 

즉, 객체의 메서드를 콜백 함수로 전달하면 (별도의 바인딩이 없는 한) 해당 객체를 this로 바라볼 수 없게 된다는 것!

 

let obj = {
  val: [1, 2, 3],
  methods: function(v, i) {
    console.log(this, v, i);
  }
};

/* 메서드로서 호출 */
obj.methods(1, 2);  // obj 1 2

/* 콜백함수로 객체의 메서드를 전달하더라도(obj.methods) 함수로서 호출 */
[5,6,7].forEach(obj.methods);  // window 5 0
                               // window 6 1
                               // window 7 2

 

obj를 this로 하는 메서드를 그대로 전달한 것이 아니라, obj.methods가 가리키는 함수만 전달한 것이기 때문이다. 🙂

 

⭐️ obj1.func 와 obj1.func( ) 의 차이

1. obj1.func

어떤 함수의 인자에 콜백함수를 전달 할때는 obj1.func로 전달하는게 기본이다.

let obj1 = {
  name: 'obj1',
  func: function () {
     console.log(this, this.name);
  }
};
setTimeout(obj1.func, 1000); // window  ""

 

2. obj1.func( )

익명 함수를 내부에서 선언과 동시에 반환(return)한다면 obj1.func를 "호출"해야 앞서 선언한 "내부함수"를 반환할 수 있다.

/* 1️⃣ this를 객체에 바인딩시키는 해결책 */
let obj1 = {
  name: 'obj1',
  func: function () {
    let self = this;                  // obj1.func만으로도 출력가능
    return function() {               // obj1.func()로 "호출"해야 내부함수가 출력!
      console.log(self, self.name);
    };
  }
};
setTimeout(obj1.func(), 1000); // obj1  obj1

let obj2 = {
  name: 'obj2',
  func: obj1.func
};
setTimeout(obj2.func(), 1500); // obj2  obj2

let obj3 = { name: 'obj3' };
setTimeout(obj1.func.call(obj3), 2000); // obj3  obj3


/* setTimeout(obj1.func, 1000); 호출() 안하면 안뜬다 */
/* setTimeout(obj2.func, 1500); 호출() 안하면 안뜬다 */
/* setTimeout(obj1.func().call(obj3), 2000); obj3이 아닌 obj1에 바인딩.. call(obj3)은 효과 X */

 

3. call, apply, bind 메서드는 obj1.func에 연결

/* 2️⃣ this를 객체에 바인딩시키는 해결책 */
let obj1 = {
  name: 'obj1',
  func: function () {
     console.log(this, this.name);
  }
};
setTimeout(obj1.func.bind(obj1), 1000); // obj1  obj1

let obj2 = { name: 'obj2' };
setTimeout(obj1.func.bind(obj2), 1500); // obj2  obj2


/* setTimeout(obj1.func().bind(obj2), 1500); 
   TypeError: Cannot read properties of undefined (reading 'bind') */

🚩 콜백 함수 내부에서 this가 객체를 바라보게 하는 방법

1. 별도의 인자로 thisArg를 받는 함수 => map, filter, forEach 등등

2. this를 다른 변수(self)에 담아 콜백함수로 활용 => 위에서 2번 obj1.func()

3. ES5의 bind 메서드 => 위에서 3번