(재인쇄) JavaScript_javascript 기술의 익명 함수, 함수 리터럴 및 클로저

원본 출처 : http://www.dnew.cn/post/196.htm

먼저 다음 작성 방법을 살펴보겠습니다

1.function f(x){return x*x ; };f(x);

2.(function(x){return x*x;})(x)

3.(function(x){return x* x ;}(x));

우리 모두는 우리가 자주 사용하는 첫 번째 유형에 대해 잘 알고 있어야 합니다. 두 번째와 세 번째 방법은 모두 익명 함수를 작성하는 방법입니다.

------------------------------- ------ ----------

두번째
은 다음과 같을 수 있습니다. 이해:

var f=function(x) {return x*x;};f()

그러면 다음을 통해 함수를 참조하지 않으면 변수 f는

function (){}()

그러나 이는

var f=1
f와 같이 확실히 잘못된 것입니다. =f*0;

및

var f=1 2*0; 결과가 다릅니다.
올바른 결과를 얻는 유일한 방법은 다음과 같습니다.

f=(1 2)*0

즉, 프로그램 블록을 명확하게 식별해야 합니다.
( function(){})()


질문이 있을 수 있습니다. 대괄호 "()"가 코드 블록을 식별하는 역할을 합니까?
JavaScript에 내장된 기능을 사용하여 확인할 수 있습니다!
가장 간단한 예를 들면 다음과 같습니다.

alert(4)

이 코드는 콘텐츠가 "4"라는 메시지를 표시합니다.
이 코드로 변경하세요
(alert)( 4 )

실행 효과가 이전 코드와 동일한 것을 확인할 수 있습니다.

이러한 형태의 함수 실행은 많은 JavaScript 프레임워크에서도 사용됩니다.

------------------------------- ------ ----------

세 번째 하나, 사용해 본 적이 있다면 jsvm 프레임워크를 살펴보면 내부 코드가 이 형식을 사용하고 있음을 알 수 있습니다.
세 번째 상황을 어떻게 설명할까요?
브라우저가 이 글을 어떻게 이해하는지 이해하기 위해 Mozilla Firefox의 오류 콘솔 기능을 사용할 수 있습니다.
코드에 오류 코드를 삽입하세요. 코드 조각은 다음과 같습니다.

(function(s){s s}(1)).splice()

Mozilla Firefox를 엽니다. 오류 제어 대만에서는 다음 오류 메시지를 볼 수 있습니다.

오류: (함수 {})(1)에 속성이 없습니다
소스 파일: file:///C:/Documents… .html
line: 18



에 따르면 브라우저는 코드를
(function(s){s s}(1))
처럼 취급한다고 볼 수 있습니다. (함수 ( s) {s s})(1)
분석합니다.


---------------------------- ---------------------------------------

이 시점에서 다음과 같은 이해를 가집니다:

function f(x){return x*x;};f(x);==(function(x){return x*x;})(x);==( function(x){return x*x;}(x));


그러나 여전히 다릅니다.
우선 두 번째 및 세 번째 형태와 같은 다른 함수의 경우 코드에서는 정의된 함수를 호출하는 것이 불가능합니다. 이러한 함수를 익명 함수(anonymous function), 함수 리터럴(function literal)이라고 합니다.
둘째, 두 번째 및 세 번째 형태로 실행되는 함수의 경우 중간 변수가 전역 네임스페이스를 오염시키지 않습니다. 중간 코드를 순수한 하위 프로세스 호출로 간주할 수 있습니다.
물론 후자의 두 가지 형태의 함수 정의를 사용하여 클로저를 쉽게 구현할 수 있습니다.
看一个例子：

/*
http://jibbering.com/faq/faq_notes/closures.html（Dnew.CN注）
A global variable - getImgInPositionedDivHtml - is declared and
  assigned the value of an inner function expression returned from
  a one-time call to an outer function expression.

  That inner function returns a string of HTML that represents an
  absolutely positioned DIV wrapped round an IMG element, such that
  all of the variable attribute values are provided as parameters
  to the function call:-
*/
var getImgInPositionedDivHtml = (function(){
   /* The - buffAr - Array is assigned to a local variable of the
      outer function expression. It is only created once and that one
      instance of the array is available to the inner function so that
      it can be used on each execution of that inner function.

      Empty strings are used as placeholders for the date that is to
      be inserted into the Array by the inner function:-
   */
   var buffAr = [
       '

       '',   //index 1, DIV ID attribute
       '" style="position:absolute;top:',
       '',   //index 3, DIV top position
       'px;left:',
       '',   //index 5, DIV left position
       'px;width:',
       '',   //index 7, DIV width
       'px;height:',
       '',   //index 9, DIV height
       'px;overflow:hidden;\">       '',   //index 11, IMG URL
       '\" width=\"',
       '',   //index 13, IMG width
       '\" height=\"',
       '',   //index 15, IMG height
       '\" alt=\"',
       '',   //index 17, IMG alt text
       '\">'
   ];
   /* Return the inner function object that is the result of the
      evaluation of a function expression. It is this inner function
      object that will be executed on each call to -
      getImgInPositionedDivHtml( ... ) -:-
   */
   return (function(url, id, width, height, top, left, altText){
       /* Assign the various parameters to the corresponding
          locations in the buffer array:-
       */
       buffAr[1] = id;
       buffAr[3] = top;
       buffAr[5] = left;
       buffAr[13] = (buffAr[7] = width);
       buffAr[15] = (buffAr[9] = height);
       buffAr[11] = url;
       buffAr[17] = altText;
       /* 빈 문자열을 사용하여
의 각 요소를 결합하여 생성된 문자열을 반환합니다. (
         요소를 함께 결합하는 것과 동일함):-
       * /
       buffAr 반환 .가입하다('');
   }); //:내부 함수 표현식의 끝입니다.
})();
/*^^- :외부 함수 표현식의 인라인 실행입니다. */