Introduction to anonymous functions in js _ basic knowledge

The role of an anonymous function is to create a closed area and the variables and methods in it cannot be accessed outside. The following describes what an anonymous function is and how to use it. 1. Anonymous functions Overview

The first understanding of anonymous functions is still in the jquery source code. When jQuery is opened, the first thing we can see is:

The Code is as follows:

(Function (window, undefined) {......}) (window );

This is an anonymous function. The red parameter is used to create a closed area and the variables and methods in the area cannot be accessed outside.

Since it cannot be accessed, how can we call jquery? This is because jquery's anonymous function has the following two sentences (blue ):

The Code is as follows:

(Function (window, undefined ){

// Define a local copy of jQuery
Var jQuery = function (selector, context ){
// The jQuery object is actually just the init constructor 'enabled'
Return new jQuery. fn. init (selector, context );
},

.........

Window. jQuery = window. $ = jQuery;

}) (Window );

JQuery was originally passed to the window in the anonymous function, which is why the window is passed in the parameter transfer. Therefore, every call to jquery in the future is actually the jQuery object that calls the window.

Jquery calls the methods in it. It cannot be called outside, which ensures security and non-conflict.

2. Next, let's talk about jQuery plug-ins.

Some code of the paging control I wrote is as follows:

The Code is as follows:

; (Function ($ ){

$. Fn. tabing = function (arg ){
Instance = new Plugin (this, arg );
};
Var instance = null;
Function Plugin (element ){
This. _ tabs = $ (element );

This. _ tabli = $ ("a [href * = '#']", this. _ tabs );
This. _ tabDiv = this. _ tabs. siblings (). filter ("p [id * = 'tab']");
This. init ();
}
Plugin. prototype = {
Init: function (){
This. _ tabli. addClass ("unselected ");
This. _ tabli. eq (0). addClass ("selected ");
This._tabDiv.css ("display", "none ");
This._tabDiv.eq(0).css ("display", "block ");
This. _ tabli. each (function (){
$ (This). bind ("click", function (){
For (var I = 0; I Instance._tabdiv.eq(i2.16.css ("display", "none ");
}
Instance. _ tabDiv. filter ("#" + $ (this). attr ("href" ).split('{'{1}}.css ("display", "block ");
});
})
}
}

}) (JQuery );

Pay attention to the red word. In fact, the jQuery plug-in is also writing anonymous functions. This ensures the independence of each plug-in, or how to call the plug-in, the red word $. fn. tabing indicates that there is a tabing in this plug-in that gives the fn of jquery,

In this way, the jquery object outside can directly call tabing, which is also the only contact between the plug-in and the outside world.

3. I have finished using the jquery plug-in for anonymous functions. Let's talk about the anonymous functions of window.

In fact, jquery itself is the anonymous function of window, that is, the first point. How do we write the anonymous function of window?

After an anonymous function is written, there is an interface in the function that interacts with the window, for example:

The Code is as follows:

(Function (){
Function getObjByID (id ){
Return document. getElementById (id );
}
Function _ addClass (id, className, classValue ){
$ (Id). style. className = classValue;
}
Window. addClass =__ addClass;
})();

In the same way, you can call addClass () outside the anonymous function, but cannot call getObjByID ().

4. The anonymous function will also be executed during parsing.

As follows:

The Code is as follows:

Function Video (){};
Function Movie (){};

Var _ video = new Video ();
_ Video. size = 3;
_ Video. toString = function (){
Return "video ";
};
_ Video. getName = function (){
Return "VideoXXX ";
};
Var _ movie = new Movie ();
(Function (parent, child ){
For (var ele in parent ){
If (! Child [ele]) // The parent is copied only when the child does not contain this attribute or method.
Child [ele] = parent [ele];
}
}) (_ Video, _ movie); // anonymous function call Method

Alert (_ movie. size); // 3
Alert (_ movie. toString (); // [object Object]
Alert (_ movie. getName (); // VideoXXX

All three alert results indicate that the anonymous function is executed internally.