자바스크립트 func.call, func.aplly, func.bind

HyosikPark·2020년 10월 20일
0

Javascript

목록 보기
12/26

func.call, func.apply

func.call(obj, arg1, arg2, ...) : 실행하려는 함수에 this가 있을 때 
this값을 obj로 고정시켜준다. arg는 전달하려는 매개변수.

func.apply(obj,args) : func.call과 비슷하지만 args는 배열을 받아서
함수에 전달할 때 요소들을 인수로 분리하여 전달한다.func.call(obj,...args
)와 같다.

let worker = {
    name: 'value',
    slow(min, max) {
      return `${this.name} : ${min + max}`;
},
}
보통 위와 같은 매서드들을 필요할 때마다 즉시 실행하지만 오래걸리는 작업이라
캐싱을 해두고 싶을 때 함수로 구현할 수 있다.

function cachingData(func, hash) {
  let cache = new Map()
  
  return function (...args) {
    let key = hash(args)
  	if(cache.has(key)) {
    	return cache.get(key);
    } else {
    	let result = func.apply(this, args);
      	cache.set(key, result);
      
      	return result;
    }
  }
}
  
function hash(args) {
	return args.join();
}
  
worker.slow = cachingData(worker.slow, hash);
worker.slow(3,5); // 8

처음실행할 때에는 map에 저장해두고 다음 실행때부터는 map에서 꺼내오는 것이다.
cachingData내의 중첩함수에서 worker.slow를 실행할때에는 this값을 읽지못한다. 따라서 call 또는 apply를 사용하여 this값을 지정해줘야한다.

func.bind

객체 매서드를 실행할 때 this값을 지정해주는 방법이다.

func.bind(obj, arg1, arg2, ...) : call과 비슷하지만 차이점은 bind는 함수가 
호출되지 않는다. 즉 함수를 호출하기 위해서는 func.bind()() 이렇게 괄호를 두번
넣어줘야 한다는 건데 bind에도 인수를 넣고, 호출할때에도 인수를 넣으면 어떻게
전달이 될까? func.bind(obj, arg1, arg2)(arg3, arg4)func(arg1, arg2, arg3,
arg4)와 인수전달 형태가 같으며 this값만 obj로 변경되게 된다.
bind에 인수를 넣게되면 변수에 저장하여 인수를 고정값으로 활용할 수 있다.

setTimeout, setInterval 같은 스케줄링 함수는 인자에 함수를 넣을 경우
호출이 아닌 함수명만 기입해야하기 때문에 this를 지정해줘야 할 경우
bind를 사용하면 편리하다. 또한 delay전에 this를 지정해준 obj가 수정되어도
반영되지 않는 장점이 있다.

참고

https://ko.javascript.info/

0개의 댓글