js立即执行函数

直接上代码。

立即执行函数结构(function(){})();分解下变成

function(){} //首先执行这个匿名函数

) //返回函数对象

();//执行返回的函数对象


文字解释:

先看这个函数的执行顺序,红色function是最先被执行的,然后再会return 一个function也就是绿色部分。最后执行蓝色部分的();

这样一看很自然,它自身就是个闭包。

看一段简单的代码:

(function(a,b){

alert(a+b);//output > 15  由于是立即执行函数或叫自执行函数,这里会直接执行,而不需要fn()或new fn();

})(5,10)


那么这个立即执行函数的作用到底是什么呢?

1.用来作为命名空间

在开发中如果同时多人进行开发,变量名会容易引起冲突,比如:

A:在a.js开发过程中这么写到

var dialog = new Dialog();

...

do something


B:在b.js开发过程中也要这么写到:

var dialog = new Dialog();

...

do something


然后两个js一合并,或者在一个页面index.html同时引入两个<script src="a.js"/>和<script src="b.js"/>

然后自然而然的两个变量名冲突了,b.js覆盖掉了a.js中的var dialog;然后很自然的a.js在执行的过程中,执行了b.js的代码。

所以为了解决这个问题我们改成以下代码

A:

(function(){

var dialog = new Dialog();

...

do A something

})();


B:

(function(){

       var dialog = new Dialog();

       ...

       do B something

})();

然后俩人的代码互补影响,由于在立即执行函数里面,页面加载可以直接执行的。也不需要像普通函数一样需要用()或 new 来调用什么的。


2.模块化开发

然后我们再来用这个特性来开发一个公共模块:

var common= (function(){

        var option;

       var getUrl = function(){

              return "base/url"

        };

       

        var getPosition = function(){

              return {

                       x:25,

                       y:30

             }

        };

      option.getUrl  = getUrl ;

      option.getPosition = getPosition ;

     return option; //将option对象返回,赋值给common

})();

这么一个公共模块就写好了。

下面我们再写一个模块来继承这个common模块


var module= (function(option){ //接受到传递的common

       var url = option.getUrl();

       var position =  option.getPosition ();

       var test = function(){ 

            alert(url);

       }

      test();

})(common);//在这里把common当做参数传递给上面的option


顺便提示一下:

      test();  //这里会报错,TypeError: undefined is not a function,因为test是一个变量,它的值是一个匿名函数,在var test声明之前,调用test肯定报错啦。

      var test = function(){ 

            alert(url);

       }

      所以正确的写法是写在var test的后面.

      var test = function(){ 

            alert(url);

       }

      test();


    下面这种方式是能顺利执行的。直接声明函数在整个作用域内可执行。

      test();  

      function test(){ 

            alert(url);

       }










评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值