JavaScript 함수 종류_javascript 기술에 대한 자세한 설명

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

목차

• 일반 함수: 같은 이름으로 재정의, 인수 개체, 기본 반환 값 등 일반 함수의 특징을 소개합니다.
• 익명 함수: 익명 함수의 특징을 소개합니다: 가변 익명 함수, 이름 없는 익명 함수.
• 클로저 함수 : 클로저 함수의 특징을 소개합니다.

1. 일반 기능
1.1 예시

function ShowName(name) {
  alert(name);
}
 

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

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

var n1 = 1;
 
function add(value1) {
  return n1 + 1;
}
alert(add(n1));//调用的是下面的函数，输出：3
 
function add(value1, value2) {
  return value1 + 2;
}
alert(add(n1));//输出：3
 

1.3 인수 객체

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

function showNames(name) {
  alert(name);//张三
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);//张三、李四、王五
  }
}
showNames('张三','李四','王五');

1.4 함수의 기본 반환값

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

function showMsg() {
}
alert(showMsg());//输出：undefined
　　

2.익명기능
2.1 변수 익명함수

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

2.1.2 예시

//变量匿名函数，左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
  alert(p1+p2);
}
anonymousNormal(3,6);//输出9

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

2.2 이름 없는 익명 함수

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

2.2.2 예시

(function (p1) {
  alert(p1);
})(1);

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

3. 폐쇄 기능
3.1 설명

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

3.2 예시

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

function funA() {
  var i = 0;
  function funB() { //闭包函数funB
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA(); //全局变量引用：累加输出1,2,3,4等
 
function partShowA() {
  var showa = funA();//局部变量引用：只输出1
  showa();
}

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

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

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

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

function funA(arg1,arg2) {
  var i = 0;
  function funB(step) {
    i = i + step;
    alert(i)
  }
  return 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 내에서 변수 공유

function funA() {
  var i = 0;
  function funB() {
    i++;
    alert(i)
  }
  allShowC = function () {// allShowC引用匿名函数,与funB共享变量i
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB引用了funA，allShowC在内部重新进行了绑定，与allShowB共享变量i

3.3 적용 가능한 시나리오

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.