JavaScript_javascript 스킬의 함수 패턴에 대한 자세한 설명

JavaScript 디자인 패턴의 역할은 코드의 재사용성과 가독성을 높여 코드의 유지 관리와 확장을 더 쉽게 만드는 것입니다

JavaScript에서 함수는 객체 유형이므로 다른 함수에 매개변수로 전달될 수 있습니다. 또한 함수는 범위를 제공할 수도 있습니다.

함수 생성 구문

이름이 지정된 함수 표현식

코드 복사 코드는 다음과 같습니다.

//명명된 함수 표현식
var add = 함수 add(a,b){
b를 돌려주세요;
};

함수 표현

코드 복사 코드는 다음과 같습니다.

//익명함수라고도 함
var add = 함수(a,b){
b를 돌려주세요;
};

변수 add에 할당된 값은 함수 정의 자체입니다. 이런 식으로 add는 어디서든 호출할 수 있는 함수가 됩니다.

기능 선언

코드 복사 코드는 다음과 같습니다.

함수 foo(){
//여기에 코드를 입력하세요
} //여기에는 세미콜론이 필요하지 않습니다

함수 표현식에는 항상 후행 세미콜론을 사용해야 하며, 함수 선언에는 후행 세미콜론이 필요하지 않습니다.

함수 선언 및 표현식

함수 끌어올리기

함수 선언의 동작은 명명된 함수 표현식의 동작과 동일하지 않습니다. 차이점은 다음 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

모든 변수는 함수 본문의 어디에 선언되었든 내부적으로 함수의 맨 위로 끌어올려집니다. 함수에 보편적으로 적용할 수 있는 이유는 함수는 변수에 할당된 객체일 뿐이기 때문입니다.

승천은 이름에서 알 수 있듯이 아래에 있는 것을 위로 끌어올리는 것입니다. JS에서는 맨 뒤에 정의한 것(변수나 함수)을 맨 앞으로 정의하도록 승격시키는 역할을 합니다. 위의 예에서 볼 수 있듯이 함수 호이스트 내부의 foo와 bar가 맨 위로 이동하여 전역 foo 및 bar 함수를 덮습니다. 로컬 함수 bar와 foo의 차이점은 foo는 최상위로 승격되어 정상적으로 실행이 가능한 반면 bar()의 정의는 승격되지 않고 선언만 승격되므로 bar()가 실행되면 결과가 표시된다는 점입니다. 함수로 사용되는 대신 정의되지 않은 상태로 사용됩니다.

즉시 기능 모드

함수도 객체이므로 반환 값으로 사용될 수 있습니다. 자체 실행 함수를 사용하면 익명 함수를 직접 선언하고 즉시 사용할 수 있어 한 번 사용하고 사용하지 않는 함수를 정의할 필요가 없고 이름 충돌 문제도 피할 수 있다는 장점이 있습니다. js에서는 네임스페이스를 사용하므로 함수 이름 충돌이 발생하기 쉽습니다. 이름 충돌이 발생하면 마지막으로 선언된 이름이 우선합니다.

모드 1:

코드 복사 코드는 다음과 같습니다.

(함수 () {
      var a = 1;
         반환 기능 () {
경고(2);
        };
}()());//팝업 2, 첫 번째 괄호는 자체 실행이고 두 번째 괄호는 내부 익명 함수를 실행합니다

모드 2: 자체 실행 함수 변수 지정

코드 복사 코드는 다음과 같습니다.

모드 3: 중첩 함수

코드 복사 코드는 다음과 같습니다.

모드 4: 자체 실행 함수가 반환 값을 변수에 할당합니다

코드 복사 코드는 다음과 같습니다.

var abc = (함수 () {
          var a = 1;
              반환 기능 () {
                      반환;
            }
           })();//자체 실행 함수는 변수로 반환된 후 함수를 반환합니다.
Alert(abc());//alert(abc)이면 return 문 뒤의 코드가 팝업되고, abc()이면 return 뒤의 함수가 실행됩니다.

모드 5: 함수가 내부적으로 재귀적으로 실행됩니다

코드 복사 코드는 다음과 같습니다.

// 이것은 자체 실행 함수입니다. 함수는 내부적으로 재귀적으로 실행됩니다.
함수 abc() { abc() }

콜백 모드

콜백 함수: write() 함수를 다른 함수 call()에 매개변수로 전달하면 call()이 특정 순간에 write()를 실행(또는 호출)할 수 있습니다. 이 경우 write()를 콜백 함수라고 합니다.

비동기 이벤트 리스너

콜백 패턴에는 다양한 용도가 있습니다. 예를 들어 이벤트 리스너를 페이지의 요소에 연결할 때 실제로 이벤트가 발생할 때 호출될 콜백 함수에 대한 포인터를 제공합니다. 예:

코드 복사 코드는 다음과 같습니다.

document.addEventListener("click",console.log,false);

위의 코드 예제는 문서 클릭 이벤트가 발생했을 때 버블링 모드에서 콜백 함수 console.log()에 전달된 을 보여줍니다.

Javascript는 콜백 모드가 프로그램의 비동기 실행을 지원하므로 이벤트 중심 프로그래밍에 특히 적합합니다.

타임아웃

콜백 모드를 사용하는 또 다른 예는 브라우저의 창 개체에서 제공하는 시간 초과 메서드인 setTimeout() 및 setInterval()을 사용하는 경우입니다.

코드 복사 코드는 다음과 같습니다.

라이브러리의 콜백 패턴

js 라이브러리를 설계할 때 콜백 함수가 유용할 것입니다. 라이브러리의 코드는 재사용 가능한 코드를 최대한 사용해야 하며 콜백은 이러한 일반화를 달성하는 데 도움이 될 수 있습니다. 실제로 거대한 js 라이브러리를 설계할 때 사용자에게는 대부분의 기능이 필요하지 않으며 핵심 기능에 집중하고 "후크 형식"으로 콜백 기능을 제공할 수 있으므로 확장, 확장, 및 사용자 정의 라이브러리 방법

카레

Curry 기술은 함수 본문에 여러 매개변수를 채워 함수를 새로운 단순화된(더 적은 수의 매개변수를 허용함) 함수로 변환하는 기술입니다. ————【JavaScript 능숙자】

간단히 말해서 커링은 변환 과정, 즉 함수 변환을 수행하는 과정입니다. 아래 예:

코드 복사 코드는 다음과 같습니다.

add()가 처음으로 호출되면 반환된 내부 함수에 대한 클로저가 생성됩니다. 이 클로저는 원래 x 및 y 값을 개인 변수 oldx 및 oldy에 저장합니다.

이제 다음과 같은 모든 기능 카레의 일반적인 방법을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

커링을 사용하는 경우

동일한 함수가 호출되고 전달된 매개변수가 압도적으로 동일한 것으로 확인되면 해당 함수는 커링에 적합한 후보 매개변수가 될 수 있습니다