经常使用JavaScript的同学应该注意过类似于下面这样结构的脚本语言
著名的第三方类库jQuery就是用到这样的语法,这个就叫做“自执行匿名函数”
第一次看到这样的语法的时候其实感觉挺奇怪的,除了括号里面的匿名函数外“()();“,两个括号且以分号结尾,着实有点难以理解。其实仔细分析一下还是可以讲的通的。
首先,小括号在语句中起到”表达式组合分块“作用,并且每个分组都会有返回值,在控制台下运行执行下面的语句试试
alert(typeof function(){});
// “function”
可见自执行匿名函数的第一个括号返回的是一个“Function对象”,实际上小括号加上匿名函数返回的是一个匿名函数的引用,后面再加一个括号就跟普通函数的调用一样,由此便可以解释括号里面的匿名函数为什么可以达到自执行的效果了
下面代码中有两种对外暴露接口的方式:
//方法一
(function(){
var foo =
'Hello';
var bar =
'World!'
function
basz(){
return foo + ' ' + bar;
}
function
foo(){
return foo + ' ' + bar;
}
window.ax=basz;
})();
console.log(ax()); //...and now this
works.
console.log(37);
//方法二
var
foo = ( function() {
var
secret = 'secret';
//
“闭包”内的函数可以访问 secret 变量,而 secret 变量对于外部却是隐藏的
return
{
get_secret: function ()
{
// 通过定义的接口来访问 secret
return secret;
},
new_secret: function (
new_secret ) {
// 通过定义的接口来修改 secret
secret = new_secret;
}
};
}
() );
console.log(foo.get_secret
());
console.log(foo.secret);// Type
error,访问不能
foo.new_secret ('a new secret'); //
通过函数接口,我们访问并修改了 secret 变量
console.log(foo.get_secret
());
// 得到 'a new
secret'
body
{
width:
300px;
position:
relative;
}
.aside
{
width:
100px;
height:
150px;
float:
left;
background:
#f66;
}
.main
{
height:
200px;
background:
#fcc;
}