JavaScript의 함수 함수-JS 튜토리얼-php.cn

JavaScript의 함수 함수

PHPz

풀어 주다： 2018-09-29 09:49:37

원래의

5133명이 탐색했습니다.

함수는 호출 시 이벤트 중심으로 실행되는 재사용 가능한 코드 블록입니다. 다음으로, JavaScript의 함수 기능을 배워보세요. 학습

먼저 JavaScript에서 함수를 정의하는 여러 가지 방법을 소개하겠습니다.

1. 가장 기본적인 별도의 함수 선언으로 사용됩니다.

코드는 다음과 같습니다.

function func(){

로그인 후 복사

또는

var func=function(){}

로그인 후 복사

2. 클래스 생성자로 사용:

function class(){}
class.prototype={};
var item=new class();

로그인 후 복사

3. 클로저로 사용:

(function(){
//独立作用域
})();

로그인 후 복사

4. :

var addEvent=new function(){
   if(!-[1,]) 
      return  function(elem,type,func){
         attachEvent(elem,&#39;on&#39;+type,func);
      };
   else 
      return function(elem,type,func){
          addEventListener(elem,type,func,false);
      }
};//避免了重复判断

로그인 후 복사

5. 위 4가지 상황을 혼합 적용:

var class=new function(){
var privateArg;//静态私有变量
function privateMethod=function(){};//静态私有方法
return function(){/*真正的构造器*

로그인 후 복사

자바스크립트 함수의 종류 : 일반함수, 익명함수, 클로저함수 위주로 소개

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 인수 객체

argument는 C#의 매개변수와 유사하며, 변수 매개변수를 작동합니다. 함수에 전달되는 매개변수의 개수는 함수에 전달되는 매개변수의 개수보다 큽니다. 수량을 정의했을 때의 매개변수입니다.

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

로그인 후 복사

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 함수 내부 변수의 안전성을 보장한다.

위 내용은 js의 함수에 대한 소개입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.