JS Anonymous function Use Introduction _ Basics

1. anonymous function Overview

For the first time about anonymous functions or in the jquery source, opening jquery is the first thing to see

Copy Code code as follows:

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

This is an anonymous function, red as the parameter, the function of the anonymous function is to create a closed area, outside can not access the variables and methods inside.

If you can't access it, how can you call jquery? This is because the anonymous function of jquery has two words (the blue word):

Copy Code code 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 to New JQuery.fn.init (selector, context);
},

.........

Window.jquery = window.$ = JQuery;

}) (window);

The original in the anonymous function of the jquery to the window, which is why the parameter passed to pass the window, so the next time to call jquery is actually called the window of jquery this object.

Call yourself inside the method by jquery. The outside is not callable, which guarantees security and does not conflict.

2. Then the above topic, about jquery plug-ins

Here's a partial code for the paging control I wrote:

Copy Code code 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;i<instance._tabdiv.length;i++) {
Instance._tabdiv.eq (i). CSS ("display", "none");
}
Instance._tabdiv.filter ("#" +$ (This). attr ("href"). Split (' # ') [1]). CSS ("Display", "block");
});
})
}
}

}) (JQuery);

Note that the red word, in fact, the jquery plugin is also in the Write anonymous function, so as to ensure the independence of each plug-in, it is not called plug-ins, red Word $.fn.tabing in this plug-in has a tabing to the jquery FN,

This way the jquery object outside can call tabing directly, which is the only contact between the plugin and the outside world.

3. The use of the jquery plugin for anonymous functions, say the anonymous function of Windows

In fact, jquery itself is the anonymous function of window, that is, the 1th, how do we write the anonymous function of window?

That is, after the anonymous function is written, there is an interface in the function that interacts with the window, such as the following:

Copy Code code as follows:

(function () {
function Getobjbyid (ID) {
return document.getElementById (ID);
}
function __addclass (id,classname,classvalue) {
$ (ID). style.classname=classvalue;
}
Window.addclass=__addclass;
})();

It also looks like a red word, so that addclass () can be invoked outside of the anonymous function, but Getobjbyid () cannot be invoked.

4. Anonymous functions are also executed at the time of parsing

As follows:

Copy Code code as follows:

function video () {};
function Movie () {};

var _video = new video ();
_video.size = 3;
_video.tostring = function () {
Return to "video";
};
_video.getname = function () {
return "Videoxxx";
};
var _movie = new movie ();
(Function (parent, child) {
for (var ele in parent) {
if (!child[ele])///When the child does not contain the property or method, a copy of parent is copied
Child[ele] = Parent[ele];
}
}) (_video, _movie); How anonymous functions are called

alert (_movie.size); 3
Alert (_movie.tostring ()); [Object Object]
Alert (_movie.getname ()); Videoxxx

All three alert have results, indicating that the anonymous function was executed internally.