JS基础篇:立即执行函数


1、定义

声明一个函数,并立即调用这个函数,此时这个函数就是立即执行函数,简单来说就是定义函数之后立即执行该函数。立即执行函数一般也写成匿名函数的形式,匿名函数写法为 function(){},就是使用function关键字声明一个函数,但是未命名的函数。关于匿名函数有一点要注意的是:匿名函数不能单独使用,否则会报错,至少需要用 () 包裹起来。

2、作用

  1. 不需要为函数命名,避免污染全局变量。
  2. 创建一个独立作用域,这个作用域里面的变量,外部访问不到,避免变量污染。
  3. 闭包和私有数据

3、使用场景

  1. 在页面加载完成后,需要立即执行的一些初始化设置,例如时间处理,创建对象等。
  2. 一些只需要执行一次的代码,代码中的某些变量在执行结束后,再也不会被用到,我们就不适合用全局变量,可能会变量污染,此时更适合用立即执行函数。

4、语法

// 立即执行函数的两种写法

// 第一种:用括号把整个函数定义和括号调用包裹起来
(function(){
    // 函数体
}())

// 第二种:用括号把函数定义包裹起来,后面再加括号调用
(function (){
    // 函数体
})()

// 注意:之所以要用圆括号包裹,是因为在浏览器的JS引擎规定,如果function出现在行首,一律解析成语句,
// 而此时我们希望JS引擎将其理解为一个表达式,圆括号的包裹就是起这个作用的。

5、常见写法

// 普通函数形式
function foo(){console.log("Hello World!")}()//声明函数后加()会报错
(function foo(){console.log("Hello World!")}())//用括号把整个表达式包起来,正常执行
(function foo(){console.log("Hello World!")})()//用括号把函数包起来,正常执行
!function foo(){console.log("Hello World!")}()//使用!,求反,这里只想通过语法检查。
+function foo(){console.log("Hello World!")}()//使用+,正常执行,这里只想通过语法检查。
-function foo(){console.log("Hello World!")}()//使用-,正常执行,这里只想通过语法检查。
~function foo(){console.log("Hello World!")}()//使用~,正常执行,这里只想通过语法检查。
void function foo(){console.log("Hello World!")}()//使用void,正常执行,这里只想通过语法检查。
new function foo(){console.log("Hello World!")}()//使用new,正常执行,这里只想通过语法检查。

// 匿名函数形式
(function(){console.log("我是匿名函数。")}())
(function(){console.log("我是匿名函数。")})()
!function(){console.log("我是匿名函数。")}()
+function(){console.log("我是匿名函数。")}()
-function(){console.log("我是匿名函数。")}()
~function(){console.log("我是匿名函数。")}()
void function(){console.log("我是匿名函数。")}()
new function(){console.log("我是匿名函数。")}()

6、参数传递

// 如果立即执行函数中需要用到外部变量,我们可以通过参数传递的方式,在函数内部使用
// 形参就是传递进来的外部变量,进入立即执行函数独立的作用域,不再受外部变量的影响

(function(j){
    // 使用外部变量
    console.log(j)
})(i)

7、返回值

// 跟其他函数一样,可以返回任何类型的值
// 可通过返回值实现闭包

var result = (function(){
    var num = 666;
    reutrn function() {
        return num;
    }
})()
// 由于返回值是一个函数 所以通过 () 进行调用
console.log(result())

8、常见面试题

// 1.普通流程
for(var i=0;i<3;i++) {
    setTimeout(function() {
        console.log(i)
    },300)// 输出结果为 3 3 3
}

// 2.立即执行函数
for(var i=0;i<3;i++) {
    (function (j){
        setTimeout(function (){
            console.log(j)
        },300) // 输出结果为 0 1 2
    })(i)
}

// 3.let 块级作用域
for(let i=0;i<3;i++) {
    setTimeout(function() {
        console.log(i)
    },300)// 输出结果为 0 1 2
}

第一段代码中 setTimeout 定时器属于异步操作,它是在 for 循环执行完之后,才执行的,因为 i 是var 声明的,作用域贯穿于整个函数作用域,所以当执行setTimeout时,i 已经通过for循环变成了 3 ,所以输出结果为:3 3 3。

第二段代码中使用了立即执行函数,使每次for循环都创建了一个独立作用域,并把每次循环 i 的值,传递进独立作用域,不受外界影响,所以输出结果为 :0 1 2。

第三段代码中使用了 ES6 的 let ,使每次for循环都创建了一个块级作用域,不同作用域之间不影响,所以输出结果为: 0 1 2。


文章作者: 弈心
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 弈心 !
评论
  目录