JavaScript 익명 함수 및 클로즈업 상세 정보

개요
JavaScript 전단 개발에서 함수는 상태 즉 어법 환경(lexical environment)에 대한 참조와 함께 패키지(closure)를 구성합니다.즉, 패키지를 닫으면 내부 함수에서 외부 함수 작용역에 접근할 수 있다.JavaScript에서 함수는 생성될 때마다 패키지를 닫습니다.익명 함수와 패키지는 함께 공부할 수 있고 이해를 깊이 있게 할 수 있다.본고는 주로 간단한 예를 통해 익명 함수와 패키지의 흔한 용법을 약술하고 학습과 공유에만 사용하며 부족한 점이 있으면 바로잡아 주십시오.
일반 함수
일반 함수는fucntion 키워드, 함수 이름, () 및 {} 쌍으로 구성되어 있습니다. 아래와 같습니다.

 function box(){
   return 'Hex';
 }
 alert(box());

익명 함수
말 그대로 익명 함수는 실제 이름이 없는 함수다.다음과 같이 별도의 익명 함수를 실행할 수 없습니다.

 function (){
   return 'Hex';
 }
 // ， ： 

어떻게 익명 함수가 실행할 수 없는 문제를 해결합니까?다음과 같은 몇 가지 방법이 있습니다.
1. 다음과 같이 익명 함수를 변수에 지정합니다.

 // 
 var box=function(){
   return 'Hex';
 }
 alert(box());

2. 자체 실행을 통해 함수를 호출합니다. 형식은 다음과 같습니다. (익명 함수) ()

 (function(){
   alert('Hex');
 })();

3. 다음과 같이 익명 함수가 수행한 반환 값을 변수에 지정합니다.

 var box=(function(){
   return 'Hex';
 })();
 alert(box);// ： 

4. 변수를 줄이거나 다음과 같이 하십시오.

 alert((function() {
   return 'Hex';
 })());

자가 집행 익명 함수는 어떻게 매개 변수를 전달합니까?다음과 같습니다.

 (function(age) {
   alert('Hex--' + age);
 })(30);

패키지 닫기(closure)
패키지는 함수와 이 함수를 만드는 어법 환경을 조합한 것이다.이 환경은 이 패키지를 만들 때 접근할 수 있는 모든 국부 변수를 포함합니다.간단하게 이해: 함수 안의 함수, 하위 함수는 부 함수의 작용역 안의 변수에 접근할 수 있다.
1. 함수 안에 익명 함수를 넣으면 다음과 같다.

function box(){
  // 
  return function(){
    return 'Hex';
  }
}
alert(box()());
// 
var b=box();
alert(b());

2. 클립을 통해 국부 변수를 되돌려줍니다. 클립을 사용하면 장점이 있고 단점이 있습니다. 국부 변수가 메모리에 주재할 수 있습니다.

function box(){
  var age=100;// ， 
  return function(){
    return age;
  }
}
alert(box()());

패키지 닫기와 전역 변수 비교
1. 다음과 같이 글로벌 변수 누적 사용:

var age=100;
function box(){
  age++;
}
alert(age);
box();
alert(age);
box();
alert(age);

2. 다음과 같이 로컬 변수 누적을 사용합니다.

function box(){
  var age=100;
  age++;
  return age;
}
alert(box());// 
alert(box());// 
alert(box());// 

3. 다음과 같이 클립을 사용하여 누적합니다.

function box(){
  var age=100;
  return function(){
    age++;
    return age;
  }
}
var b=box();// b
alert(b());// 
alert(b());// 
alert(b());// 
b=null;// ， , 

차이점: 전역 변수를 사용하면 명칭 충돌을 일으키기 쉽고 시스템 성능이 떨어진다.
순환 익명 함수 값 추출 문제
1. 순환 중의 익명 함수 수치 문제는 다음과 같다. arr[0]=0, arr[1]=1...arr[4]=4의 효과

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=function(){
      return i;
    }
  }
  // ， ，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]()); // 5， arr[0]=0,arr[1]=1 ...arr[4]=4 
}

상기 문제는 어떻게 최적화됩니까?
메서드 1, 다음과 같이 패키지를 사용하지 않고 직접 값을 부여합니다.

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=i; // 
  }
  // ， ，i=5
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]);
}

메서드 2는 다음과 같이 익명 함수의 자체 실행을 통해 수행됩니다.

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=(function(num){
    　　// 
    　　return num;
    })(i);
  }
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]);
}

메서드 3, 다음과 같이 변수를 메모리에 저장합니다.

function box(){
  var arr=[];
  for (var i=0;i<5;i++) {
    arr[i]=(function(num){
      // 
      return function(){
      　　return num;
      };
    })(i);
  }
  return arr;
}
var b=box();
for (var i=0;i<5;i++) {
  alert(b[i]());
}

this의 지향에 관한 문제
개체 내부에 대해this는 개체 자체를 가리킨다. 다음과 같다.

 var box={
   getThis:function(){
     return this;
   }
 };
 alert(box.getThis());// [object Object] // this box 

var user='The window';
var box={
  user:'The box',
  getUser:function(){
    return this.user;
  }
}
alert(box.getUser());// ：the box

this는 패키지를 닫을 때 윈도우 대상을 표시하기 때문에 패키지가 실행될 때 윈도우를 가리킨다. 다음과 같다.

var box1 ={
  getThis:function(){
    return function(){
      return this;
    }
  }
};
alert(box1.getThis()()); // [object Window]// this window 

var box1={
  user:'The box',
  getUser:function(){
    // box1
    return function(){
      // widow
      return this.user;
    };
  }
}
alert(box1.getUser()());// ：the window ， this window

어떻게 하면 닫힌this가 box를 가리키게 합니까?다음과 같은 두 가지 방법이 있습니다.

alert(box1.getUser().call(box1));// 
// box 
var box1={
  user:'The box',
  getUser:function(){
    var that=this;
    return function(){
      return that.user;
    };
  }
}
alert(box1.getUser()());

단점: 패키지를 닫으면 대상을 방출할 수 없기 때문에 메모리 유출을 초래하기 쉽다. 다음과 같다.

function box(){
  var a1=document.getElementById('A01');
  var txt=a1.innerHTML;
  a1.onclick=function(){
    // a1 null， 
    //alert(a1.innerHTML);// ,
    alert(txt);
  }
  // ， a1
  a1=null;// a1 ， 
}
box();

블록 레벨 역할 영역
블록급 작용역을 모방하고 대상을 향한 사상, 변수를 봉인한다.일반 함수는 다음과 같이 블록 레벨 역할 영역의 개념이 없습니다.

function box(){
  for (var i=0;i<5;i++) {

  }
  alert(i);// ：5， for ，i 
}
box();

어떻게 i를 사유화하고 역할 영역을 벗어나서 방문할 수 없습니까?익명 함수의 자체 실행을 사용할 수 있는 도메인은 다음과 같이 액세스할 수 없습니다.

function box(){
  (function(){
    for (var i=0;i<5;i++) {

    }
  })();
  //alert(i);// ： “i” 
}
box();

전역 변수의 개인 역할 영역은 다음과 같이 변수의 이름 충돌을 감소합니다.

 (function(){
   // 
   var age=100;
   alert(age);
 })();
 //alert(age);//// ： “age” 

일반 함수와 구조 함수의 차이: 이니셜 대문자.대상의 속성과 함수는 모두public 형식입니다.

function Box(){
  this.age=100; // ， 
  // 
  this.run=function(){
    return 'running....';
  }
}
var box=new Box();
alert(box.age); // 
alert(box.run());// 

어떻게 공유 속성을 사유화합니까?다음과 같습니다.

function Box(){
  var age=100;// ， 
  function run(){// ， 
    return 'running....';
  }
  // ， 
  this.go=function(){
    return age+' '+run();
  }
}
var box=new Box();
alert(box.go());

구조 함수를 통해 다음과 같이 매개변수를 전달합니다.

function Box(v){
  var user=v;
  this.getUser=function(){
    return user;
  };
  this.setUser=function(v){
    user=v;
  }
}
var box=new Box('Hex');
alert(box.getUser());
// ， 

주의: 구조 함수를 통해 대상을 만들 때마다 다른 주소를 분배합니다.
정적 개인 변수
다음과 같이 정적 개인 변수를 사용하여 데이터를 공유할 수 있습니다.

(function(){
  var user=''; // 
  Box=function(value){// ， Box, 
    user=value;
  }
  Box.prototype.getUser=function(){
    return user;
  };
  Box.prototype.setUser=function(value){
    user=value;
  };
})();
var box=new Box('AAAA'); // 
alert(box.getUser());// AAAA
var box2=new Box('BBBB');// 
alert(box.getUser());// BBBB

단례 대상
단례는 하나의 실례화된 대상만 있고 두 가지 실현 방식이 있을 수 있다.
1. 다음과 같이 글자 양을 통해 이루어진다.

var box={
  user:'hex',
  go:function(){
    return user+' is running....';
  }
};
alert(box.go());

2. 다음과 같이 익명 함수의 자체 실행을 통해 객체를 반환합니다.

var box=function(){
  var user='Hex'; // 
  function run(){ // 
    return ' is running....';
  }
  // 
  var obj= {
    // 
    going:function(){
      return user+run();
    }
  }
  return obj;
}();
alert(box.going());

다음은 자바스크립트 익명 함수와 패키지에 대한 상세한 내용입니다. 자바스크립트 익명 함수와 패키지에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!