Introduction to functional usage in JavaScript (anonymous function, function pass value, parameters) (1/2)

First lesson--anonymous function

One, what is an anonymous function?

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

1. Functions keyword (function) statement:

The code is as follows	Copy Code
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, which can be invoked when a recursive function is written, but not by using the function () constructor.

The code is as follows	Copy Code
var f = function fact (x) { if (x < = 1) return 1; else return x*fact (x-1); };

The 2.Function () constructor allows run-time JavaScript code to be dynamically created and compiled. In this way it resembles the global function eval ().
The 3.Function () constructor resolves the body of the function 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.

The code is as follows	Copy Code
var y = "global"; function Constructfunction () { var y = "local"; Return the new Function ("Return y"); Unable to get local variable } Alert (Constructfunction () ()); Output "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.

The code is as follows

Copy Code

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
1. The first sentence of a modular pattern of JavaScript 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, Yui and its corresponding examples of a large number of use of anonymous functions, other JavaScript libraries are also a large number of uses.
The cornerstone of 2.Javascript functional programming (functional programming)

Lesson two – functions as values
In fact, the way we generally declare functions in JavaScript can be seen as a simplified syntax (i.e., syntactic sugars, syntactic sugar).

Cases:

The following two expressions are actually exactly the same. So the expression on the left is just the shorthand on the right.

The code is as follows	Copy Code
function average (x,y) { Return (x+y)/2; } Alert (average (1,3)); var average = function (x,y) { Return (x+y)/2; } Alert (average (1,3));

Instance

The code is as follows	Copy Code
<script type= "Text/javascript" > function MyFunction () { Return ("Hello, wish you happy!") ") } </script> <body> <script type= "Text/javascript" > document.write (MyFunction ()) </script> The script in the <p>body section calls a function. </p> <p> The function returns a piece of text. </p> </body>

Instance

The code is as follows

Copy Code

<title>example-6.12 function parameter and function return value </title> <body> <script> <!-- function Dwn (s) { document.write (S + "<br/>"); } Set transform operation, closure op as parameter function trans (list, op) { for (var i = 0; i < list.length; i++) { Calculates the result of each list[i] after executing the OP based on the closure op, and updates the list[i with this result List[i] = OP (list[i]); } } var list = [1,2,3,4]; Trans (list, function (x) {return x+1}); DWN (list); Get 2,3,4,5 Trans (list, function (x) {return x*2}); DWN (list); Because this time list=[2,3,4,5] so the output is 4, 6, 8, 10 Accumulator: Closure as return value function Add (A, B) { b = B | | 0; var s = a + B; Returns a closure for further accumulation. var ret = function (a) { Return Add (A, s); } ret.valueof = ret.tostring = function () { return s; } return ret; } Dwn (Add (5)); 5 Dwn (Add (5) (10)); 15 Dwn (Add (5) (10) (20)); 35, this closure will execute twice. --> </script> </body>

The output results are:

The code is as follows	Copy Code
2,3,4,5 4,6,8,10 5 15 35

From here you can conclude that a function is a value like a string, a number, or an array. There are several problems:

Can I pass the function as a parameter?

OK, see the example below.
Can I generate a function in real time?
Of course, this is an advanced topic that can be done through the Eval function. Tips: Look at the source code for this page.
Cases:

This example demonstrates how to pass a function as a parameter.

The code is as follows	Copy Code
var applyfun = function (f,x,y) {return F (x,y);}; var add = function (x,y) { return x+y; }; Alert (Applyfun (add,3,4)); 7

Home 1 2 last page