javascript中自执行函数浅析

最新推荐文章于 2023-03-31 22:07:34 发布

sododo002

最新推荐文章于 2023-03-31 22:07:34 发布

阅读量327

点赞数

分类专栏： javascript

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先，每个方法定义的局部变量，在外部是无法访问的，比如：

function foo(){
    var name;
}

这里的name变量对外界没有任何的污染，不会影响到其他地方的代码。如果每个模块的代码都这样写，那么就都不会打架了。

利用的函数的这一特性来实现隔离非常有效。通常情况下，我们只需要一个匿名的自执行函数就可以了：

(function(){
   var name = 'Tom';
   return name;
})()

如果仅仅是return一个name那大可没必要这么干，我们需要返回一个具有类似JavaBean读写功能的对象：

(function(){
   var name = 'Tom';
   var age = 10;
   return {
        name :name,age:age
   }
})()

自执行函数的三种写法：

第一种

(function(){ console.log("方法1");}())

第二种

(function(){ console.log("方法2");})()

第三种

(function (n1,n2){
        console.log("方法3");
    })(10,100)//110

    (function start(n1,n2){
        console.log("方法4")
    })(10,100)//110

作用

自执行函数出现有两个作用：

页面加载时需要做一些设置工作，如初始化操作，这些工作没必要重复执行，因此不需要一个有名字的复用函数
做这些工作有时需要用到一些变量，这些变量不能污染全局作用域

(function (){
    var message = "Welcome";
    alert(message);
})();

这就起到了只执行一次并且隔离作用域的作用。

制作计数器

<body>
<body>


<p>局部变量计数。</p>
<button type="button" οnclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>


</body>