JavaScript anonymous function Summary _javascript tips

Source: Internet
Author: User

One, what is an anonymous function?

There are generally three ways to define a function in javascript:

    1. functions keyword (function) statement :
      function fnMethodName(x){alert(x);}
    2. functions literal (function literals):
      var fnMethodName = function(x){alert(x);}
    3. function () constructor :
      var fnMethodName = new Function('x','alert(x);')

The above three methods define the same method function Fnmethodname, the 1th is the most commonly used method, the latter two are to copy a function to the variable fnmethodname, and this function is not a name, that is, anonymous function. In fact, quite a few languages have anonymous functions .

The difference between function literals and functions () constructors

    1. Although the function literal is an anonymous function, the syntax allows you to specify any function name, and you can call itself when you write a recursive function, which is not possible with the function () constructor.
      var f = function fact(x) {
       if (x < = 1) return 1;
       else return x*fact(x-1);
      };
    2. The function () constructor allows run-time JavaScript code to be dynamically created and compiled. In this way it resembles the global function eval ().
    3. The function () constructor resolves the body of the functions every time it executes and creates a new function object. Therefore, it is very inefficient to call function () constructors in a loop or in frequently executed functions. Instead, the literal volume of a function is not recompiled every time it is encountered.
    4. When a function () constructor is created, it does not follow a typical scope, and it is performed as a top-level function.
      var y = "global";
      function constructFunction() {
        var y = "local";
        // 无法获取局部变量 } alert(constructFunction()()); // 输出 "global" 

The function () constructor has its own characteristics and is more difficult to use than the functional keyword definition, so this technique is often rarely used. The function literal expression is very close to the definition of the function keyword. Consider the previous distinction, although there is a message that the literal anonymous function has bugs under some WebKit engines under OS X 10.4.3, but our usual anonymous function refers to an anonymous function that takes the form of a function literal. More details can be read in the functions chapter of the Javascript:the definitive Guide, 5th Edition.

Code patterns for anonymous functions

Yesterday Hedger Wang introduced several code patterns for anonymous functions in his blog:

error mode : It does not work, the browser will report syntax errors.

function(){
 alert(1);
}();
    1. function literal : Declare a Function object first, and then execute it.
      (function(){
       alert(1);
      } ) ( );
    2. Precedence expression : Because the JavaScript execution expression is from inside the parentheses to the outside, the declared function can be enforced with parentheses.
      ( function(){
       alert(2);
      } ( ) );
    3. void operator : A void operator is used to perform a single operand that is not surrounded by parentheses.
      void function(){
       alert(3);
      }()

These three ways are equivalent, Hedger Wang for personal reasons like the 3rd kind, and in the actual application I see and use is the 1th kind.

Iv. Application of anonymous function

    The first sentence of the
    1. is "global variable is the Devil". With the VAR keyword, anonymous functions can effectively ensure that JavaScript is written on the page without causing global variables to be contaminated. This is very effective and graceful when adding JavaScript to a page that is not very familiar. In fact, the yui and its corresponding paradigm uses a lot of anonymous functions, and there are plenty of other JavaScript libraries to use. The cornerstone of
    2. JavaScript's functional Programming (functional programming). Specifically, see and .

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.