내가 10 년 동안 블로그를 작성하지 않았다는 것을 기념하기 위해 첫 번째 블로그 게시물은 흥미로운 트릭으로 시작합니다 -___-
ES5에서, 우리가 함수를 호출 할 때, 다른 함수 또는 조건에 따라 전달 될 매개 변수가 생성되는 경우, 즉 몇 개의 매개 변수가 전달 될지 확실하지 않은 경우 원래 함수를 변경하지 않고 어떻게해야합니까?
(물론, 매개 변수를 객체 또는 배열로 변경하는 등이 기사에 설명 된 상황을 피하십시오.)
대부분의 사람들은 적용을 사용 하여이 문제를 완벽하게 해결할 수 있다는 것을 알고있을 것입니다.
Call과 마찬가지로 첫 번째 매개 변수는 기능의 호출 객체로 사용됩니다. 즉, 호출 함수의 포인터는 첫 번째 매개 변수로 다시 작성됩니다. 그것이 객체의 방법이 아닌 경우, 이것을 무시하고 널을 전달할 수 있습니다.
차이점은 다음 매개 변수가 적용되면 모든 매개 변수를 배열에서 호출 함수로 전달하고 원래 함수와 같이 순서대로 호출이 추가됩니다.
배열이므로 제어 할 수 있습니다. 다른 함수 또는 논리적 판단을 기반으로 배열을 생성하면 동적 번호 매개 변수를 전달하는 목적을 달성 할 수 있습니다.
그러나 나는 두통을 겪었다. 새로 객체를 만들 때 동적 매개 변수를 전달해야했습니다. 몇 년에 한 번만 걸렸습니다.
REST 매개 변수와 함께 ES6을 사용하는 경우 위의 문제 중 어느 것도 문제가되지 않습니다. 배열 args 전에 3 점을 추가하는 것은 구문 오류가 아니라 ES6에서 제공하는 REST 매개 변수 쓰기 방법입니다. 당신은 그것을 대체하는 것으로 이해할 수 있습니다 ... Args와 Args 배열이 사각형 브래킷 이후 문자와 함께 Args 배열을 이해할 수 있습니다.
그러나 ES5에서 구현하는 것이 정말로 불가능합니까? 결국 대부분의 ES6은 구문 설탕이며 Babel과 같은 도구를 사용하여 ES5로 컴파일 할 수 있습니다. 질문이 있으면 Babel을 사용하여 우리가 얻는 것을 컴파일하고 확인해 봅시다.
마지막 줄을 보았을 때 충격을 받았습니다. 두려워하지 마십시오. 이 코드를 분석합시다. 먼저, 그것을 제거하고 세 단계로 살펴 보겠습니다.
1. 두 번째 매개 변수가 적용될 때, 우리는 [null, 1, 2, 3]을 얻는 것처럼, 우리의 매개 변수를 배열로 널로 연결하는 데 연결을 사용하여 매개 변수를 배열로 연결한다는 것은 의심의 여지가 없습니다.
2. 적용을 계산합시다. 첫 번째 매개 변수 FOO는 기능을 대체하여 기본 바인드 메소드를 호출합니다. 두 번째 매개 변수 배열의 내용은 결합 매개 변수로 전달됩니다. 즉, foo.bind (null, 1, 2, 3);
3. BIND 방법의 첫 번째 매개 변수는 적용 및 호출과 유사 하며이 포인터를 수정하며 후속 매개 변수는 함수의 기본 사전 설정 주요 인수 값을 이식 할 수 있습니다. 즉, 바인드가 실행되면 첫 번째 괄호 세트에 3 개의 매개 변수 값이 주입 된 FOO 클래스를 얻습니다.
마지막으로, 우리가 새로운 foOwithargs (); , 우리는 매개 변수를 전달할 필요가 없습니다. New Foo (1, 2, 3)에 해당합니다.