하루5분코딩"call,apply"

HwangSoonhwan·2020년 10월 20일
0

### 메소드를 사용한 함수의 실행을 보자.

function foo(){
  return 'bar'
}
foo()//'bar'
foo.call()//'bar'
foo.apply()//'bar'

✓ .call, .apply 호출은 명시적으로 this 를 지정하고 싶을때 사용! this는 인자의 첫번째 값이 된다.

예제 .apply 을 이용해 배열인자를 풀어서 넘기기

Math.max.apply (null ,[5,4,3,2,1]) //5 
//apply 는 숫자들의 집합으로 만들어 준다.
Math.max.call (null , ...[5,4,3,2,1])//5
//call 은 들어온 그대로를 사용한다. ...을 이용하여 배열을 벗겨준다.
Math.max(...[5,4,3,2,1])//5

예제 .call Prototype 을 빌려 실행하기

let allDivs = document.querySelectorAll('div');// Nodelist 라는 유사배열
  [].map.call(allDivs, function(el){ // 유사배열이라 map을 사용할수 없었지만, call을 통해 Array Prototype 으로 map 메소드를 빌려 this 를 넘겨 map을 사용.
    return el.className
  })

객체 지향에서의 call, apply 사용 예제

function Product(name, price){
  this.name = name
  this.price = price
}
function Food(name,price){
  Product.apply(this, name, price)//인자가 많을시 product.apply(this, argument)
  this.category = 'food'
}
let cheese = newFood('feta',5000) //cheese 는 Product 이면서 Food
profile
👨‍🍳요리사의 "쿠킹" 스토리가 아닌 "코딩" 스토리💻

0개의 댓글