Javascript call, apply, bind

const log = console.log
var num = 777;  
var obj = {
	num: 10
}

function sum(a, ...rest) {
  const _sum = this.num + a + rest.reduce((sum, num) => sum + num, 0);
  log(this);
  log('function', _sum);
  return _sum;
}

sum.call(null, 5, 5, 5); // 792
sum.call({}, 5, 5, 5); // NaN
sum.call(obj, 5, 5, 5); // 25
sum.apply(obj, [5, 5, 5]); // 25
var boundSum = sum.bind(obj);
boundSum(5, 5, 5); // 25

var sum = (a, ...rest) => {
  console.log(this);
  return this.num + a + rest.reduce((sum, num) => sum + num, 0)
};

sum.call(obj, 5, 5, 5); // 792 scope 안 바뀜
var arrowBoundSum = sum.bind(obj);
arrowBoundSum(5, 5, 5); // 792 scope 안 바뀜

call, apply, bind은 함수가 사용할 this를 변경하기 위해 사용
call은 각각 전달된 인수와 함께 호출
apply는 [] 배열로 전달된 인수와 함께 호출
bind는 this만 변경해 함수를 반환

• 화살표 함수는 생성되는 그 때 스코프가 결정된다.
• 화살표 함수에서는 this가 바인딩되지 않았기 때문에, call apply 메서드에서는 인자만 전달할 수 있습니다. this는 무시됩니다.

this는 어렵다...
(수정 중)

참고: MDN: this