자바스크립트 함수의 종류에 대한 간략한 토론_기본지식

이 글에서는 주로 일반 함수, 익명 함수, 클로저 함수를 소개합니다

1. 공통 기능 소개
1.1 예시

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

함수 ShowName(이름) {
경고(이름);
}

1.2 Js에서 같은 이름의 함수 덮어쓰기

JS에서는 함수 이름이 동일하고 매개변수 서명이 다른 함수를 정의하면 이후 함수가 이전 함수를 덮어쓰게 됩니다. 호출되면 다음 함수만 호출됩니다.

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

var n1 = 1;

함수 추가(값1) {
n1 1을 반환합니다.
}
Alert(add(n1));//다음 함수가 호출되어 출력: 3

함수 추가(값1, 값2) {
반환값1 2;
}
경고(추가(n1));//출력: 3

1.3 인수 객체

인수는 변수 매개변수를 작동하는 C#의 매개변수와 유사합니다. 함수에 전달되는 매개변수의 수는 정의된 매개변수의 수보다 큽니다.

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

함수 showNames(이름) {
경보(이름);//장산
for (var i = 0; i < 인수.길이; i ) {
경고(인수[i]);//장산, 리시, 왕우
}
}
showNames('장산','리시','왕우');

1.4 함수의 기본 범위값

함수에서 반환 값을 지정하지 않는 경우 기본 반환 값은 '정의되지 않음'입니다

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

함수 showMsg() {
}
경고(showMsg());//출력: 정의되지 않음

　

2. 익명 기능

2.1 변수 익명함수

2.1.1 설명
변수와 이벤트에 함수를 할당할 수 있습니다.

2.1.2 예시

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

//변수 익명 함수, 왼쪽에는 변수, 이벤트 등이 있을 수 있습니다.
var anonymousNormal = 함수(p1, p2) {
경고(p1 p2);
}
익명Normal(3,6);//출력 9

2.1.3 적용 가능한 시나리오
①함수 이름 오염을 방지합니다. 먼저 이름을 사용하여 함수를 선언한 다음 이를 변수나 이벤트에 할당하면 함수 이름을 남용하게 됩니다.

2.2 이름 없는 익명 함수

2.2.1 설명
즉, 함수가 선언되면 그 뒤에 매개변수가 옵니다. JS 구문이 이 함수를 구문 분석하면 내부 코드가 즉시 실행됩니다.

2.2.2 예시

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

(함수(p1) {
경고(p1);
})(1);

2.2.3 적용 가능한 시나리오
① 한번만 실행하면 됩니다. 브라우저가 로드되면 해당 기능은 한 번만 실행하면 되며 이후에는 실행되지 않습니다.

3. 폐쇄 기능

3.1 설명

함수 A가 내부에 함수 B를 선언하고, 함수 B가 함수 B 외부의 변수를 참조하고, 함수 A의 반환 값이 함수 B에 대한 참조라고 가정합니다. 그러면 함수 B는 폐쇄 함수입니다.

3.2 예시

3.2.1 예시 1: 글로벌 참조와 로컬 참조

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

함수 funA() {
var i = 0;
Function funB() { //닫기 함수 funB
         나 ;
경고(i)
}
funB를 돌려주세요;
}
var allShowA = funA(); //전역 변수 참조: 누적 출력 1, 2, 3, 4 등

함수 부분ShowA() {
var showa = funA(); //지역변수 참조: 1만 출력
쇼와();
}

allShowA는 funA 함수를 참조하는 전역 변수입니다. allShowA()를 반복 실행하면 1, 2, 3, 4 등의 누적값이 출력됩니다.

FunA를 참조하기 위해 로컬 변수 showa만 내부적으로 선언되므로 partShowA() 함수를 실행합니다. 실행 후 범위로 인해 showa가 차지한 리소스가 해제됩니다.

닫기의 핵심은 범위입니다. 전역 변수가 차지하는 리소스는 페이지가 변경되거나 브라우저가 닫힐 때만 해제됩니다. var allShowA = funA()인 경우 funB()를 참조하는 allShowA와 동일하므로 funB()의 리소스는 GC에 의해 재활용되지 않으므로 funA()의 리소스도 재활용되지 않습니다.

3.2.2 예시 2: 파라메트릭 폐쇄 기능

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

함수 funA(arg1,arg2) {
var i = 0;
함수 funB(단계) {
i = 내가 밟는다;
경고(i)
}
funB를 돌려주세요;
}
var allShowA = funA(2, 3); //호출은 funA arg1=2, arg2=3
allShowA(1);//호출은 funB step=1, 출력 1
allShowA(3);//호출은 funB입니다. setp=3, 출력 4

3.2.3 예시 3: 상위 함수 funA 내에서 변수 공유

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

함수 funA() {
var i = 0;
함수 funB() {
         나 ;
경고(i)
}
AllShowC = function () {// allShowC는 익명 함수를 참조하고 변수 i
를 funB와 공유합니다.          나 ;
경고(i)
}
funB를 돌려주세요;
}
var allShowA = funA();
var allShowB = funA();//allShowB는 funA를 참조하고, allShowC는 내부적으로 다시 바인딩되며 변수 i
를 allShowB와 공유합니다.

3.3 적용 가능한 시나리오

① funA의 변수는 외부에서 직접 접근할 수 없으므로 funA 함수 내부의 변수에 대한 안전성을 보장합니다.

JavaScript 기능에 대해 배운 적이 있나요? 궁금한 점이 있으면 메시지를 남겨주세요.