JavaScript ES6立即执行函数

昌远啊

已于 2022-03-01 09:20:09 修改

阅读量791

点赞数 1

文章标签： javascript 前端 typescript

于 2022-03-01 09:18:23 首次发布

本文链接：https://blog.csdn.net/qq_51609259/article/details/121643992

版权

本文介绍了JavaScript中的立即执行函数（IIFE）及其在防止命名冲突和创建私有作用域中的作用。通过示例展示了如何利用IIFE实现对象的封装和单例模式。此外，还探讨了闭包的概念，以及如何结合闭包来实现对象的私有成员。最后，通过一个具体的例子展示了如何使用IIFE创建一个具有私有变量和方法的单例对象。

摘要由CSDN通过智能技术生成

立即执行函数

看过jQuery源码的人应该知道，jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就是使用立即执行函数。

首先了解函数声明方式

//函数声明
function test(){
consel.log("TEST!");
}
//函数表达式
let test=function(){
consel.log("你好！");
}
//匿名函数
function(){
consel.log("你好呀！");
}

立即执行函数表达方式

( function(){…} )()和( function (){…} () )
//一个是一个匿名函数包裹在一个括号运算符中，
//后面再跟一个小括号。另一个是一个匿名函数后面跟一个小括号，
//然后整个包裹在一个括号运算符中，这两种写法是等价的。

立即执行函数解释注意
一是函数体后面要有小括号()，
二是函数体必须是函数表达式而不能是函数声明。

从图中可以看出，除了使用()运算符之外，！，+，-，=等运算符都能起到立即执行的作用。这些运算符的作用就是将匿名函数或函数声明转换为函数表达式，如下图所示，函数体是函数声明的形式，使用运算符将其转换为函数表达式之后就可达到立即执行效果：
立即执行函数好处
通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。此时若是想访问全局对象，将全局对象以参数形式传进去即可
闭包和立即执行函数
```
var car = {
    speed:0,
    start:function(){ this.speed=40; },
    getspeed:function(){ return this.speed; }
};
car.start();
console.log(car.getspeed()); //print 40
```
这个对象有其成员变量“speed”及成员函数“start”和“getspeed”，但是它的成员变量没有私有化，同时它也没有办法被继承。要实现对象的继承，你可以使用构造函数和原型继承。但怎么才能将成员变量私有化来实现对象的封装呢（而且有时候我们也不想那么麻烦使用原型）？有心的读者看了上面闭包的介绍，肯定马上有想法了。对，使用闭包！
```
function car() {
var speed = 0;
return { //返回的是一个对象
   start:function() {
       speed = 50;
   },
   getspeed:function () {
    return speed;
   }
}
}

var car1 = car();
car1.start();
console.log(car1.getspeed()); //print 50
```
说了那么多，跟立即执行函数有什么关系呢。你再仔细看看上面的例子，你有了闭包函数来帮你创建“car”对象，这个函数就类似于工厂方法，它可以根据你的需要创建多个不同的对象。
　不过开发的时候经常遇到这样的情况，就是我们希望对象只有一份，比如jQuery库的对象，它必须确保整个程序只有一份，多了也没有。在后端开发模式中，这叫单例模式，可以通过私有化构造函数来实现，那么在js里呢？
　　既然函数没法私有化，那么唯一的办法就是让这个工厂方法能且只能被调用一次。不能多次调用，那这个函数一定要是匿名函数；而且能被调用一次，那就必须在声明的时候立马执行。这时候，我们就可以邀请立即执行函数出场了：
```
var car = (function () {
    var speed = 0;
    return {
        start:function () {
           speed=60;
        },
        getspeed:function () {
           return speed;
        }
    }
})();
 
car.start();
console.log(car.getspeed()); //print 60  
```
很多人一开始会看错，认为对象“car”是一个函数，其实它是这个匿名的工厂方法执行完返回的对象，该对象拥有“start”和“getspeed”两个成员函数，而这两个函数所需要访问的“speed”变量对外不可见。同时你无法再次调用这个匿名的工厂方法来创建一个相同的对象。是不是很神奇？一个单例的，有着私有成员的对象就这么建好了。