js立即执行函数

最新推荐文章于 2024-03-29 10:57:07 发布

原创最新推荐文章于 2024-03-29 10:57:07 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

30 篇文章

订阅专栏

js立即执行函数

Introduce

突然的有一天从图书馆把jq源码翻了出来，开篇就是立即执行函数，也没觉得什么惊艳的，毕竟之前看过bootstrap源码，已经看过很多次这样的例子，但是却不明白原理，所以就整理了一下，立即执行函数的作用。

extra

顺便说说函数吧，函数无非分成三种，函数声明，函数定义，匿名函数。

学过c++的人应该对函数声明非常熟悉，无非就是

function func(参数1，参数2...) {
    函数语句
}

函数表达式也非常的简单。声明一个匿名函数，然后赋值给一个变量。比如
```
var func = function(参数1，参数2....) {
    函数语句
}
```
匿名函数是指没有函数名，也咩有赋值给变量的函数，比如
```
function(参数1，参数2) {
    函数语句。
}
```

好的，那么为什么要使用立即执行函数呢（IIFE）（Immediately Invoked Function Expression）？

原先的方法比较麻烦，比如我函数声明或者函数表达式都需要再次调用
```
function func() {
    
}
func();
var f = function() {
    
};
f();
```
而相比之下，立即执行函数是
```
(fucntion() {
    
})();
```
其次，如果是普通的函数声明，函数表达式等，你创建的变量，由于es5的变量提升，（es6中let和const不存在），会导致变量之间的作用域提升到顶部，你不能确定你写的代码和别人的代码，以及你引入的插件会不会有冲突，所以，如果你用立即执行函数，可以创建一个私有的函数作用域，这个作用域的变量和方法，不会破坏污染全局的命名空间（函数内的变量可以访问函数外的，反之不行）

type

IIFE有很多种写的方法,其实没什么区别，你只要使用一种，并且看到其他类型的，知道，哦这是立即执行函数，不会污染全局作用域，写起来简单就行

(function fn(test){
    ....
})(参数)
(function fn(test){
    ....
}(参数))
！function fn(test){
    ....
}(参数)
+function fn(test){
    ....
}(参数)
-function fn(test){
    ....
}(参数)
$(function fn(test){
    ....
})(参数)

补充

上文说的，立即执行函数最主要的两个作用，是使用简单，另一个是防止因为变量提升，导致别人代码的变量对你的代码产生影响，但是在es6出现之后，第二个原因其实就已经可以被解决了


// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

你可以看到，在es6中是存在块级作用域的，块级作用域之外的变量是无法对作用域之内造成影响的，所以这个时候，ifio函数其实已经不是必须得了。

writer&contact

{
  "name":"Jontyy" , 
  "email": " jontyy@163.com"
}

gitHub

https://github.com/YJD199798