JS에서 적용 및 바인딩을 사용하여 동적 개수의 매개변수를 함수 또는 class_javascript 기술에 전달합니다.

블로그 활동을 중단한 지 10년이 된 기념으로 첫 블로그 포스팅을 재미있는 팁으로 시작하겠습니다 -___-

ES5에서는 함수를 호출할 때 전달할 매개변수가 다른 함수나 조건에 따라 생성된 경우, 즉 몇 개의 매개변수가 전달될지 확실하지 않은 경우 원래 함수는 바뀌지 마세요. 다음에는 어떻게 해야 할까요?

(물론 이 글에서 설명한 상황을 피할 수 있다면, 매개변수를 객체나 배열로 변경하는 등 피하는 것이 좋습니다.)

대부분의 사람들은 지원하면 이 문제를 완벽하게 해결할 수 있다는 것을 알고 있습니다.

Apply는 call과 마찬가지로 첫 번째 매개변수를 함수의 호출 개체로 사용합니다. 즉, 호출 함수의 this 포인터가 개체 메서드가 아닌 경우 이를 무시할 수 있습니다. null을 전달합니다.

차이점은 다음 매개변수에 있습니다. apply는 호출 함수에 전달될 모든 매개변수를 배열로 넣고, call은 원래 함수처럼 순서대로 추가합니다.

배열이므로 제어가 가능합니다. 다른 기능이나 논리적 판단을 기반으로 배열을 생성하면 동적 개수의 매개변수를 전달하는 목적을 달성할 수 있습니다.

하지만 new로 객체를 생성할 때 동적 매개변수를 전달해야 한다는 문제가 발생했습니다. 이는 몇 년에 한 번만 발생하는 문제입니다.

ES6를 사용하고 있고 나머지 매개변수가 있는 경우 위의 문제 중 어느 것도 문제가 되지 않습니다. 참고로 args 배열 앞에 점 3개를 추가하는 것은 구문 오류가 아니라 ES6에서 제공하는 나머지 매개변수 작성 방법입니다. args 배열에서 대괄호를 제거한 후 ...args를 문자로 바꾸는 것으로 이해하시면 됩니다.

그런데 ES5에서는 실제로 이를 달성할 수 있는 방법이 없을까요? 결국 ES6의 대부분은 구문 설탕이며 babel과 같은 도구를 사용하여 ES5로 컴파일할 수 있습니다. 궁금한 점이 있으면 babel로 컴파일하여 결과를 살펴보겠습니다.

마지막 줄을 보고 충격을 받으셨을 텐데요, 두려워하지 마세요. 이 코드를 분석해 보겠습니다. 먼저, 3단계로 나누어 살펴보겠습니다.

1. concat을 사용하여 null과 매개변수를 배열로 연결하면 Apply의 두 번째 매개변수로 [null, 1, 2, 3]을 얻게 됩니다.

2. 첫 번째 매개변수인 Foo가 기본 바인딩 메서드를 호출하는 Function을 대체하게 됩니다. 즉, Foo.bind(null, 1, 2, 3);

3. 바인드 메소드의 첫 번째 매개변수는 this 포인터를 수정하는 적용 및 호출과 유사하며, 후속 매개변수는 바인드가 실행된 후 함수에 대한 기본 사전 설정 선행 인수 값을 이식할 수 있습니다. 첫 번째 괄호 세트에는 세 개의 매개변수 값이 주입된 Foo 클래스가 있습니다. 이를 FooWithArgs

라고 하겠습니다.

마지막으로 새로운 FooWithArgs();를 사용할 때 매개변수를 전달할 필요가 없습니다. new Foo(1, 2, 3)와 동일합니다.