JavaScript 설계 패턴의 역할은 코드의 재사용 성과 가독성을 향상시켜 코드를 더 쉽게 유지 관리하고 확장 할 수 있도록하는 것입니다.
JavaScript에서 함수는 객체의 클래스이며, 이는 다른 함수로 매개 변수로 전달 될 수 있음을 의미합니다. 또한 함수는 범위를 제공 할 수도 있습니다.
함수 생성을위한 구문
이름이 지정된 기능 표현
// 이름 함수 표현식 var add = function add (a, b) {return a+b;}; var foo = function bar () {console.log (foo === bar);}; foo (); // true그것들이 동일한 함수를 참조하고 있음을 알 수 있지만 이것은 기능 본문에서만 유효합니다.
var foo = function bar () {}; console.log (foo === bar); // referenceError : bar는 정의되지 않았습니다.그러나 bar ()를 호출하여 함수를 호출 할 수 없습니다.
var foo = (function bar () {console.log (foo === bar);}) (); // false기능 표현
// 익명 함수라고도 알려진 var add = function (a, b) {return a+b;};변수 추가에 할당 된 값은 함수 정의 자체입니다. 이런 식으로 ADD는 어디서나 호출 할 수있는 함수가됩니다.
기능 선언
function foo () {// code} // 여기에 세미콜론이 필요하지 않습니다.후행 세미콜론에서는 기능 표현이 항상 세미콜론을 사용해야하며 기능 선언에서 세미콜론의 종말이 필요하지 않습니다.
선언적 함수와 함수 표현의 차이점은 JS의 사전 컴파일 기간 동안 선언적 함수가 먼저 추출 된 다음 JS 코드가 순서대로 실행된다는 것입니다.
Console.log (F1); // [기능 : F1]
console.log (f2); // 정의되지 않은 JavaScript는 순서대로 완전히 해석되고 실행되지 않지만 해석 전에 JavaScript를 "사전 컴파일"합니다. 사전 컴파일 프로세스 중에 결정적인 기능이 먼저 실행됩니다.
함수 f1 () {console.log ( "i am f1");} var f2 = function () {console.log ( "i am f2");};글로벌 스코프 구성 중에 함수를 선언하는 기능을 작성하기 때문에 함수를 선언하는 기능은 Window 개체의 속성으로, 기능을 선언하는 이유에 관계없이 기능을 선언하는 이유는 궁극적으로 창 객체에 속합니다.
JavaScript 언어에서 모든 익명 함수는 창 객체에 속합니다. 익명 함수를 정의 할 때 메모리 주소를 반환합니다. 이 시간에 변수 가이 메모리 주소를 수신하는 경우, 익명 함수가 글로벌 실행 환경 구성 중에도 정의되고 할당되기 때문에 익명 함수를 프로그램에서 사용할 수 있으므로 익명 함수 의이 포인팅도 Window 개체입니다.
var f2 = function () {console.log ( "i am f2");}; console.log (f2 ()); // i am i am f2 (function () {console.log (this === Window); // true}) ();기능 선언 및 표현
기능 프로모션 (호이 스팅)
함수 선언의 동작은 명명 된 함수 표현식과 같지 않습니다. 차이점은 호이 스팅 거동입니다. 다음 예를 참조하십시오.
<script type = "text/javaScript"> // global function function foo () {alert ( "global foo!");} function bar () {alert ( 'global bar');} function hoist () {console.log (typeof foo); // function console.log (type typesof bar); // local foo (); // local foo (); bar (); // typeError : 'undefined'는 함수가 아닙니다. // variable foo 및 구현자는 홍보 기능 foo () {alert ( 'local foo! '); } // 변수 막대 만 프로모션되며 함수 구현 부분은 홍보되지 않습니다. var bar = function () {alert ( 'local bar!'); }; } Hoist (); </스크립트>신체에서 선언되는 모든 변수의 경우 내부적으로 기능의 상단으로 홍보됩니다. 함수의 일반적인 적용 이유는 함수가 변수에 할당 된 객체 일뿐입니다.
이름에서 알 수 있듯이 개선은 다음과 같은 것들을 맨 위에 언급하는 것을 의미합니다. JS에서는 다음 (변수 또는 함수)에 정의 된 내용을 이전 정의로 업그레이드하는 것입니다. 위의 예에서 알 수 있듯이 함수 내부 기능 호이스트의 Foo 및 Bar는 상단으로 이동하여 글로벌 FOO 및 막대 함수를 덮습니다. 로컬 기능 바와 FOO의 차이점은 FOO가 상단으로 홍보되고 정상적으로 실행될 수 있다는 것입니다. Bar ()의 정의는 개선되지 않았으며 선언 만 촉진됩니다. 따라서 Bar ()가 실행되면 결과가 함수로 사용되는 대신 정의되지 않습니다.
실시간 기능 모드
함수는 또한 개체이므로 리턴 값으로 사용할 수 있습니다. 자체 이행 함수를 사용하는 장점은 익명 함수를 직접 선언하고 즉시 사용하여 한 번 사용되지 않는 함수를 정의하지 않도록하고 갈등을 명명하는 문제를 피하는 것입니다. JS에는 네임 스페이스 개념이 없으므로 기능 이름 충돌이 쉽습니다. 일단 명명 충돌이 이루어지면, 마지막 선언 된 충돌이 우세해야합니다.
모드 1 : 모드 1.
<cript> (function () {var a = 1; return function () {alert (2);};} () ()); // 2 팝업, 첫 번째 괄호는 스스로 실행되고 두 번째 괄호는 내부 익명 함수 </script>를 실행합니다.패턴 2 : 자체 이행 함수 변수의 포인팅
<script type = "text/javaScript"> var result = (function () {return 2;}) (); // 함수 경고 (결과); // 자체적으로 실행 된 함수의 리턴 값 2를 가리 킵니다. 결과 ()가 팝업되면 오류가 발생합니다 </script>패턴 3 : 중첩 된 기능
<script type = "text/javaScript"> var result = (function () {return function () {return 2;};}) (); ALERT (result ()); // alert (result) function () {return 2} </script>모드 4 : 자체 실행 함수 리턴 값을 변수에 할당합니다.
var abc = (function () {var a = 1; return function () {return ++ a;}}) (); // 자체 집행 함수의 함수는 변수 알림 (ABC ())로 돌아온 후 함수를 반환합니다 (ABC ()); alert (ABC)가되면 반환 문이 팝업됩니다. ABC () 인 경우 리턴 후 기능이 실행됩니다.패턴 5 : 함수는 내부적으로 재귀 적으로 실행됩니다
// 이것은 자체 실행 함수이며, 함수는 내부적으로 재귀 함수 abc () {abc (); }콜백 모드
콜백 함수 : 함수 write ()를 다른 함수 콜에 인수로 전달하면 전화 ()가 어느 시점에서 write ()를 실행 (또는 호출) 할 수 있습니다. 이 경우 write ()를 콜백 함수라고합니다.
비동기 이벤트 리스너
예를 들어, 이벤트 리스너가 페이지의 요소에 첨부 될 때 콜백 모드에는 많은 용도가 있습니다. 실제로 이벤트가 발생할 때 호출되는 콜백 함수에 대한 포인터를 제공합니다. 좋다:
document.addeventListener ( "클릭", console.log, false);
위의 코드 예제는 문서가 클릭 할 때 버블 모드에서 콜백 함수 console.log ()를 보여줍니다.
콜백 모드는 비동기 적으로 실행하는 프로그램을 지원하기 때문에 JavaScript는 특히 이벤트 중심 프로그래밍에 적합합니다.
타임 아웃
콜백 모드를 사용하는 또 다른 예는 브라우저의 Window 객체에서 제공 한 시간 초과 방법을 사용할 때 : settimeout () 및 setInterval ()과 같은 것입니다.
<script type = "text/javaScript"> var call = function () {console.log ( "100ms가 묻습니다 ..."); }; settimeout (call, 100); </script>라이브러리의 콜백 모드
JS 라이브러리를 설계 할 때는 콜백 기능이 유용합니다. 라이브러리의 코드는 재사용 가능한 코드를 가능한 한 많이 사용해야하며 콜백은 이러한 일반화를 달성하는 데 도움이 될 수 있습니다. 우리가 거대한 JS 라이브러리를 설계 할 때, 사실은 사용자가 대부분이 필요하지 않다는 것입니다. 핵심 기능에 집중하고 "후크 양식"으로 콜백 기능을 제공 할 수있어 라이브러리 방법을 쉽게 빌드, 스케일 및 사용자 정의 할 수 있습니다.
카레
카레는 여러 매개 변수를 함수 본체로 채우면 함수를 새로운 단순화 된 (더 적은 매개 변수) 함수로 변환하는 기술입니다. - - JavaScript에 능숙하다
간단히 말해서, 카레화는 전환 프로세스, 즉 기능 변환 과정입니다. 다음 예에서 볼 수 있듯이 :
<script type = "text/javaScript"> // curry 기반 add () 함수 함수 추가 (x, y) {var Oldx = x, Oldy = y; if (typeof oldy == "undefined") {return function (newy) {return Oldx + Newy; }; } // X+Y를 완전히 바르십시오. } // add (5); // output "function"add (3) (4); // 7 // 새 함수 생성 및 저장 var add2000 = add (2000); add2000 (10); // output 2010 </script>Add ()가 처음으로 요구되면 반환 된 내부 기능에 대한 폐쇄가 생성됩니다. 이 클로저는 원래 x 및 y 값을 개인 변수 Oldx와 Oldy에 저장합니다.
이제 우리는 다음과 같은 기능을 사용하여 일반적인 카레 방법을 사용할 수 있습니다.
<script type = "text/javaScript"> // 일반 함수 함수 추가 (x, y) {return x + y; } // 카레 카레 새로운 함수를 얻는 함수 var newadd = test (add, 5); NewAdd (4); // 9 // 다른 옵션은 새 기능 테스트를 직접 호출합니다 (Add, 6) (7); // 출력 13 </script>카레를 사용하는시기
동일한 함수가 호출되고 대부분의 전달 된 매개 변수가 동일하다는 것이 발견되면, 함수는 카레화를위한 좋은 후보가 될 수 있습니다.