Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트 call() 메서드란? 개념부터 실전 예제까지

자바스크립트 call() 메서드란 무엇인가?

JavaScript의 call() 메서드는 함수를 호출할 때 첫 번째 인수로 전달한 객체를 해당 함수의 this 값으로 지정하는 기능을 합니다. 즉, 어떤 객체에 속하지 않은 함수라도 call()을 사용하면 원하는 객체의 컨텍스트에서 실행할 수 있습니다.

이 메서드는 서로 다른 객체가 동일한 메서드를 공유하거나 재사용해야 할 때 특히 유용합니다. 상속 구조 없이도 한 객체의 기능을 다른 객체에 적용할 수 있기 때문입니다.

call() 메서드의 기본 문법

함수명.call(thisArg, arg1, arg2, ...)

첫 번째 매개변수 thisArg는 함수 내부에서 this로 참조될 객체이며, 이후의 매개변수들은 호출되는 함수에 순서대로 전달됩니다.

예제 코드

다음 예제를 실행하면 call() 메서드가 어떻게 동작하는지 확인할 수 있습니다.

<html>
   <head>
      <script>
         var person = {
            Name: "John",
            Department: "Finance",
            fullName: function() {
                return this.Name + " is from " + this.Department + " Department";
            }
         }

         var myObject = {
            Name: "Amit",
            Department: "Marketing",
         }
         x = person.fullName.call(myObject);
         document.write(x);
      </script>
   </head>

   <body>
   </body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

Amit is from Marketing Department

person 객체의 fullName 메서드가 myObject를 기준으로 실행되었기 때문에, John이 아닌 Amit의 정보가 출력됩니다. 이것이 바로 call() 메서드의 핵심 동작 방식입니다.

apply() 메서드와의 차이점

call()과 비슷한 역할을 하는 메서드로 apply()가 있습니다. 두 메서드 모두 첫 번째 인수로 this에 바인딩할 객체를 받지만, 함수에 전달할 인수를 지정하는 방식이 다릅니다. call()은 인수를 쉼표로 나열하여 전달하고, apply()는 인수를 배열 하나로 묶어 전달합니다.