Learn and assemble JavaScript anonymous functions _javascript tips

Source: Internet
Author: User
The Ancients have "given the fish, as the award of the fishing", without teachers, they can only learn "fishing". Let's start with a simple one!
The following code is the most familiar, but do you know why it's written? Why add this code to the page, the jquery object has been introduced.
Copy Code code as follows:

(function ($) {
Implementation code for the function
}) (JQuery);
That's where I started! Programmers know how to Google and Baidu. Also I am the same ... Oh! It turns out to be a JavaScript anonymous function.

What is this anonymous function? Learn it slowly!
JavaScript defines a function in general as follows three ways:
1. Functions keyword (function) statement:
Copy Code code as follows:

function Name (a) {
return A;
}

2. Functions literal (function literals):
Copy Code code as follows:

var Name = function (a) {
return A;
}

3. Function () constructor:

var Name = new Function (' A ', ' return A; ')
The above three methods define the same method function name, the 1th is the most common method, the latter two are to copy a function to the variable name, and these two functions are not names, is this called anonymous function? Look at the explanations below!

There is a difference between the literal and function () constructors!
(1). function literal is an anonymous function that allows you to assign any function name to it, and you can call it yourself when you write a recursive function, but not by using the function () constructor.
Copy Code code as follows:

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 always treats it as a top-level function.
Copy Code code as follows:

var y = "global";
function Constructfunction () {
var y = "local";
Return the new Function ("Return y"); Unable to get local variable
}
Alert (Constructfunction () ()); Output "global"

It also involves a name, which is the function object, which is the intrinsic object of JavaScript, and all functions are actually a function object. So the top three are all function objects.
The above can be summed up as follows: function objects can be created in a normal way, structured to create functions, and functions can also have no Name (anonymous function).
Continue anonymous functions, as the name implies, anonymous function is a function without the actual name. For example, let's take the example above. The name of the function is removed, and then judge if 2,3 is a function:
Copy Code code as follows:

Alert (typeof function () {}); "Function"
Alert (typeof function (a) {return A;}); "Function"
Alert (typeof New Function ("A", "return A;") "Function"

Returns a function object that does not appear to have a name but is a functional. So how do we go about calling an anonymous function?
To call a function, we have to have a way to locate it and reference it. So, we'll need to find a name for it. This is also the example 2,3 "Name". And this is the format that we often see.
Here's another way to do that is to just open the jquery code that is given, that is, to surround the anonymous function with () and then add a pair of parentheses (including the argument list). Let us cat the following code!
Copy Code code as follows:

Alert ((function (x,y) {return x+y;}) (2,3)); "5"
Alert ((New Function ("X", "Y", "return x*y;") (2,3)); "6"

Many people may wonder why this method can be successfully invoked. If you are not busy looking at the code, perhaps you will understand.
Copy Code code as follows:

Assigning an anonymous function object to ABC
var abc=function (x,y) {return x+y;};
Alert ((ABC). constructor== (function (x,y) {return x+y;}). constructor);
The constructor of ABC is the same as the constructor of anonymous functions. In other words, the implementation of two functions is the same.

If you think this application is still very strange, just look at the explanation I read from the Internet.
Parentheses can divide our expression into chunks, and each piece, that is, each pair of parentheses, has a return value. This return value is actually the return value of an expression in parentheses. So, when we enclose the anonymous function with a pair of parentheses, the parentheses are actually returned, which is the function object for the anonymous functions. Therefore, the parentheses and the anonymous function are the names of the functions we have to get its reference position. So if you add the argument list after this reference variable, you implement the calling form of the normal function.
Finally, let's look at the code patterns for anonymous functions!
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: Use the void operator to perform a single operand that is not surrounded by parentheses.
void function () {alert (3);} ()
These three ways are equivalent, with the kind of look you think.
Oh! That's almost it! This time I understand, the beginning of those few words jquery is the function literal!
(anonymous function) Parameters (function ($) {}) (JQuery);
Related Article

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.