JavaScript에서 `call`과 `apply`의 차이점 이해

Arthur Petit

2024년 7월 3일 수요일 오전 3:46:30

JavaScript의 함수 호출 방법

JavaScript는 함수를 호출하는 여러 가지 방법을 제공하며 그 중 두 가지는 `Function.prototype.call()`과 `Function.prototype.apply()`입니다. 두 메서드 모두 지정된 `this` 값과 인수를 사용하여 함수를 호출하는 데 사용되지만 이러한 인수가 전달되는 방식이 다릅니다.

이 문서에서는 '호출'과 '적용'의 차이점, 성능에 미치는 영향, 둘 중 하나를 선호하는 시나리오를 살펴보는 것을 목표로 합니다. 결국에는 JavaScript 코드에서 `call` 또는 `apply`를 사용해야 하는 경우를 더 명확하게 이해하게 될 것입니다.

JavaScript에서 'call'과 'apply'의 차이점 살펴보기

JavaScript 프런트엔드 예

// Example of Function.prototype.call()
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const person1 = {
  firstName: "John",
  lastName: "Doe"
};

console.log(person.fullName.call(person1)); // John Doe

JavaScript에서 `call`과 `apply`의 성능 이해

JavaScript 프런트엔드 예

// Example of Function.prototype.apply()
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person2 = {
  firstName: "Jane",
  lastName: "Doe"
};

console.log(person.fullName.apply(person2, ["Oslo", "Norway"])); // Jane Doe, Oslo, Norway

JavaScript의 함수 호출에 대한 `call`과 `apply` 비교

Node.js 백엔드 예

const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person3 = {
  firstName: "Alice",
  lastName: "Smith"
};

function printName(method) {
  if (method === 'call') {
    console.log(person.fullName.call(person3, 'Paris', 'France'));
  } else if (method === 'apply') {
    console.log(person.fullName.apply(person3, ['Paris', 'France']));
  }
}

printName('call');  // Alice Smith, Paris, France
printName('apply'); // Alice Smith, Paris, France

JavaScript 개발에서 `call`과 `apply` 중 선택하기

자바스크립트 성능 분석

삼

JavaScript의 메소드 호출 및 적용에 대한 더 깊은 통찰력

기본적인 사용법 외에도 Function.prototype.call() 그리고 Function.prototype.apply() JavaScript 프로그래밍을 향상시킬 수 있는 몇 가지 고급 사용 사례가 있습니다. 이러한 사용 사례 중 하나는 한 개체의 메서드를 다른 개체에서 차용하는 메서드 차용입니다. 이는 상속 없이 다른 개체의 메서드를 사용해야 하는 개체가 있는 경우 특히 유용합니다. 사용 call() 그리고 삼를 사용하면 메서드를 일시적으로 빌려 다른 개체의 컨텍스트에서 실행할 수 있으므로 코드 재사용성이 향상되고 중복성이 줄어듭니다.

고려해야 할 또 다른 중요한 측면은 삼 가변 함수의 경우 - 가변 개수의 인수를 허용하는 함수입니다. 인수 배열이 있고 이를 배열을 허용하지 않는 함수에 전달해야 하는 경우, 삼 매우 편리해집니다. 반면에, call() 성능이 중요하고 인수 수가 알려져 있고 고정되어 있는 시나리오에서 유용할 수 있습니다. 이러한 미묘한 차이를 이해함으로써 개발자는 언제 사용할지에 대해 더 많은 정보를 바탕으로 결정을 내릴 수 있습니다. call() ~ 대 삼가독성과 성능 모두를 위해 코드를 최적화합니다.

자바스크립트 호출 및 신청 관련 자주 묻는 질문

사이의 주요 차이점은 무엇입니까 call() 그리고 삼?
call() 인수를 개별적으로 허용하지만 삼 인수를 배열로 받아들입니다.
할 수 있다 call() 그리고 삼 바꿔서 사용할 수 있나요?
예, 동일한 결과를 얻을 수 있지만 선택은 인수 구성 방식에 따라 달라집니다.
언제를 선호해야 할까요? 삼 ~ 위에 call()?
사용 삼 인수 배열이 있거나 인수 개수가 가변적인 경우.
사이에 성능 차이가 있습니까? call() 그리고 삼?
대부분의 경우 성능 차이는 미미하지만 call() 고정된 개수의 인수를 사용하면 약간 더 빨라질 수 있습니다.
어떻게 call() 그리고 삼 처리하다 this 문맥?
두 방법 모두 명시적으로 this 함수 호출에 대한 컨텍스트입니다.
사용해도 되나요 call() 그리고 삼 생성자 함수로?
아니요. 새 인스턴스를 생성하지 않으므로 생성자 함수에는 적합하지 않습니다.
고급 사용 사례는 무엇입니까? call() 그리고 삼?
이는 메소드 차용 및 가변 함수 처리에 유용합니다.
어떻게 call() 코드 가독성이 좋아지나요?
call() 인수 개수를 알고 고정하면 함수 호출이 더 명확해집니다.
할 수 있다 삼 알 수 없는 수의 인수를 처리합니까?
예, 삼 가변 개수의 인수를 처리해야 하는 함수에 이상적입니다.

함수 호출 방법에 대한 최종 생각

결론적으로 둘 다 call 그리고 apply 메소드는 지정된 함수를 호출하기 위한 JavaScript의 강력한 도구입니다. this 값. 둘 사이의 선택은 함수에 인수를 전달하는 방법에 따라 크게 달라집니다. 하는 동안 call 고정된 수의 인수를 처리할 때 가장 좋습니다. apply 배열이나 알 수 없는 수의 인수를 처리할 때 빛납니다. 이러한 미묘한 차이를 이해하면 보다 효율적이고 읽기 쉬운 코드를 작성하는 데 도움이 되며 궁극적으로 더 나은 JavaScript 프로그래밍 방식으로 이어집니다.