Introduction to the use of anonymous functions in js_basic knowledge

1. Overview of anonymous functions

The first time I knew about anonymous functions was in the jquery source code. The first thing I saw when I opened jQuery was

Copy code The code is as follows:

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

This is an anonymous function, with red as the parameter. The function of the anonymous function is to create a closed area, and the variables and variables inside cannot be accessed by the outside. method.

Since it is not accessible, how can I call jquery? This is because jquery’s anonymous function has these two sentences (blue text):

Copy code 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 'enhanced'
return new jQuery.fn.init( selector, context );
},

.........

window.jQuery = window.$ = jQuery;

})(window);

It turns out that jQuery is passed to window in the anonymous function, which is why the parameters are passed Window needs to be passed in, so every time you call jquery in the future, you actually call the jQuery object of window.

Jquery calls its own methods. It cannot be called from outside, which ensures safety and no conflict.

2. Continuing with the above topic, about the jQuery plug-in

The following is part of the code for the paging control I wrote:

Copy code 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("div[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;iinstance._tabDiv.eq(i).css("display","none");
}
instance._tabDiv.filter( "#" $(this).attr("href").split('#')[1]).css("display","block");
});
})
}
}

})(jQuery);

Pay attention to the red words. In fact, the jQuery plug-in also writes anonymous functions, which ensures the independence of each plug-in. Otherwise, it is called a plug-in. The red words $.fn.tabing indicate that there is tabing in this plug-in to the fn of jquery.

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

3. After talking about the use of anonymous functions by jquery plug-ins, let’s talk about the anonymous functions of window

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

After writing the anonymous function, there is an interface for interacting with the window in the function, such as the following:

Copy code 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;
})();

Also look at the red words, so you can call addClass() outside the anonymous function, but you cannot call getObjByID().

4. Anonymous functions will also be executed during parsing

as follows:

Copy code 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]) //When child does not contain this attribute or method , will copy a copy of the parent
child[ele] = parent[ele];
}
})(_video, _movie); //How to call anonymous function

alert (_movie.size); //3
alert(_movie.toString()); //[object Object]
alert(_movie.getName()); //VideoXXX

All three alerts have results, indicating that the anonymous function is executed internally.