JavaScript에서 호출() 및 적용()

소개
호출과 적용을 사용할 때 우리는 일반적으로 객체로 작업합니다. 이러한 메서드를 사용하여 개체 메서드를 한 개체에서 다른 개체로 상속할 수 있습니다. 예를 들어 메서드가 개체 1에 정의된 경우 개체 2에서 호출할 수 있습니다.

call과 apply의 개념은 비슷하지만 유의해야 할 중요한 차이점은 call을 사용할 때는 매개변수를 명시적으로 전달하는 반면 apply에서는 두 번째 인수를 배열로 전달한다는 것입니다. 이를 명확히 하기 위해 예를 살펴보겠습니다. 호출 방법부터 살펴보겠습니다.

부르다

const person = {
  details: function() {
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

위의 예에서는 사람 개체를 만듭니다. 그런 다음 개체 내부에 세부 정보라는 메서드를 만듭니다. 이 메서드는 사람 이름이 있는 템플릿 리터럴을 반환합니다. 다음으로 bob이라는 또 다른 개체를 만듭니다. bob에는 이름 속성과 값이 설정되어 있습니다. 마지막으로 콘솔 로그에서 call() 메서드를 사용하여 세부 메서드를 호출한 결과를 반환하고 bob을 매개 변수로 전달합니다. 여기서 call 메서드를 사용하지 않으면 다음과 같은 결과가 나타납니다.

console.log(person.details)
'My name is undefined'

따라서 호출을 사용하면 개인 개체에 정의된 세부 메서드를 사용할 수 있지만 별도의 bob 개체에 정의되어 있습니다. this는 호출할 매개변수로 전달하는 것을 나타냅니다. 세부사항 메소드 내부에 이 값을 콘솔에 기록하면 이를 확인할 수 있습니다.

const person = {
  details: function() {
    console.log(this)
    //returns ---> {name: 'Bob'}
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

적용하다
Apply는 배열을 두 번째 매개변수로 전달해야 한다는 점을 제외하면 호출과 매우 유사합니다. 호출을 사용한 초기 예제에 매개변수를 추가하여 시작하겠습니다.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob, 12));
//Returns ---> My name is Bob and I am 12 years old.

위의 예에서 이제 템플릿 리터럴에서 사용되는 세부사항 메소드에서 나이에 대한 매개변수를 설정합니다. call 메서드를 사용할 때 bob 개체를 전달한 후 이 인수에 대한 값을 전달합니다. 적용을 사용했다면 여기에서 배열을 사용해야 합니다. 이는 아래 예에 나와 있습니다.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.apply(bob, [12]));
//Returns ---> My name is Bob and I am 12 years old.

적용을 사용할 때 배열을 전달하지 않았다면 다음 오류가 발생합니다.

Uncaught TypeError: CreateListFromArrayLike called on non-object
    at <anonymous>:9:28

이 기사를 즐겼기를 바랍니다. 댓글, 질문 또는 피드백을 자유롭게 게시하고 더 많은 콘텐츠를 보려면 저를 팔로우하세요!