自执行匿名函数剖析整理

格式：
      （function(){
          //代码
        })();
解释：这是相当优雅的代码（如果你首次看见可能会一头雾水：）），包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
来个带参数的例子：
        (function(arg){
           alert(arg+100);
        })(20);
        这个例子返回120。
重要用途：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许。
       (function(){
           function $(id){
                return document.getElementById(id);
           }
           function __addClass(id,className,classValue){
                $(id).style.className=classValue;
           }
           window['mySpace']={};
           window['mySpace']['addClass']=__addClass;
        })();

上面的例子就可以用这种伪命名空间封装并保护自己的所有函数、对象和变量。而且，由于它们位于同一个函数中，所以可以互相引用。为了对受保护的代码进行全局化，随后的一对括号告诉浏览器立即执行返回的匿名函数，而且在执行期间将__addClass()赋值给了window的一个方法,这样在外部只能执行addClass而__addClass被保护起来了。我可以这样调用它：

mySpace.addClass('oneId','font-width','bold');

实例：test.html

------------------------------

<html>
<head><title>自执行匿名函数</title>
<script type="text/javascript">

(
function(){
   function $(id){
        return document.getElementById(id);
    }
    function __addClass(id,className,classValue){
       switch(className){
           case 'background':{
               $(id).style.background=classValue;
               break;
           }
           case 'color':{
               $(id).style.color=classValue;
               break;
           }
           case 'fontSize':{
               $(id).style.fontSize=classValue+'px';
               break;
           }
           case 'fontWeight':{
               $(id).style.fontWeight =classValue;
               break;
           }
       }

    }
    window['mySpace']={};
    window['mySpace']['addClass']=__addClass;
}
)();

</script>
</head>
<body>
<div id="div1">
这是测试区块
</div>
<script type="text/javascript">
mySpace.addClass('div1','background','green');
mySpace.addClass('div1','color','yellow');
mySpace.addClass('div1','fontSize','24');
mySpace.addClass('div1','fontWeight','bold');
</script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------

test2.html、nmFn.js位于同一文件夹

nmFn.js

------------------------
(
function(){
//匿名函数内部私有函数，获取某对象
function $(id){
return document.getElementById(id);
}
//匿名函数内部私有函数，用于改变某对象属性
function __addClass(id,className,classValue){
switch(className){
case 'background':{
$(id).style.background=classValue;
break;
}
case 'color':{
$(id).style.color=classValue;
break;
}
case 'fontSize':{
$(id).style.fontSize=classValue+'px';
break;
}
case 'fontWeight':{
$(id).style.fontWeight =classValue;
break;
}
}

}
//往window对象中添加mySpace属性
window['mySpace']={};
window['mySpace']['addClass']=__addClass;
//1.建立自己的对象
var personObj = {
name:"sam",
age:18,
setAge:function(){var ar=arguments;this.age=ar[0]},
getAge:function(){alert("My age is "+this.age);},
getName:function(id){
if($(id).value!="" && $(id).value!=" ") this.name=$(id).value;
alert("My name is "+this.name+" "+this.age+" old!!");
}
};
//把自己的对象挂靠到window中
window["person"]=personObj;
}
)();

------------------------

test2.html

------------------------

<html>
<head><title>自执行匿名函数</title>
<script type="text/javascript" src="nmFn.js "></script>

</head>
<body>
<div id="div1">
这是测试区块
</div>
sign your name:<input type="text" id="personName">
<input type="button" value="tell age" οnclick="person.getName('personName');" />
<script type="text/javascript">
mySpace.addClass('div1','background','green');
mySpace.addClass('div1','color','yellow');
mySpace.addClass('div1','fontSize','24');
mySpace.addClass('div1','fontWeight','bold');
</script>
</body>
</html>

自执行匿名函数剖析整理相关推荐

javascript 自执行匿名函数
1.函数声明和函数表达式 1 function func(){ //函数声明 2 ... 3 } 函数表达式又分为两种第一种是命名函数表达式 1 var func = function box(){ ...
java调用js匿名函数参数,JavaScript匿名函数、自执行匿名函数
1. 函数也是一种类型要理解匿名函数,首先需要理解函数也是一种类型. 所以函数可以赋值给变量,如下: // 将数字类型值赋给变量 var num = 1; // 将函数类型值赋给变量 var hel ...
js之删除对象中的属性——delete、es6解构赋值、自执行匿名函数
js之删除对象中的属性--delete.es6解构赋值.自执行匿名函数实例 const person = {name: '李世民',gender: 'male',age: 24 };// 删除目标对 ...
Javascript中的自执行匿名函数
格式: (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空 ...
JavaScript自执行匿名函数
格式: (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){} ...
我去，JS自执行匿名函数竟然有20几种写法！
为什么80%的码农都做不了架构师?>>> 发现一个新的自执行写法: { var x; x=1; alert(x);} //2013-01-30 14:45:57 //五大类,2 ...
Javascript的匿名函数与自执行
函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 函数的定义,大致可分为三种方式: 第一种:这也是最常规的一种 1 2 3 function ...
匿名函数与自执行函数
匿名函数与自执行函数匿名函数就是指的没有名字的函数,即定义函数对象时不定义函数体名字,但是必须将匿名函数作为表达式赋予一定操作,比如将其作为变量值或者让其自执行,否则这次定义将无意义,解释器也会抛出 ...
javascript匿名函数的各种执行形式
近期在研究Pomelo源码,这个框架基于Node.js,所以非要频繁地与JavaScript脚本打交道不可.因此,本文中我们来总结 javascript语言中匿名函数的主要目的及各种存在形式.其实,匿 ...

自执行匿名函数剖析整理

自执行匿名函数剖析整理相关推荐

最新文章

热门文章