JS重要概念之立即执行函数与闭包高级

2020-11-10  本文已影响0人  张先觉

#立即执行函数表达式IIFE,简称“立即执行函数”

立即执行函数表达式,IIFE(immediately-invoked function expression)
什么是立即执行函数表达式?——函数自动执行,并在执行完之后,立即释放。其实,和普通函数一样,若是遇见闭包,上下文AO一样不会释放。

问题:为什么立即执行函数不能这样写:function(){}(),而要这样写:(function(){})()?

回答:只有表达式才能被执行符号()执行,而括号能将函数申明变成表达式。其实,立即执行函数还能这样写:(function(){}(console.log(1)())!function(){}(console.log(2))()等等

var fun1 = function () {};
console.log(fun1);  // 打印结果:function() {}

// 立即执行函数
var fun2 = function () {}();
console.log(fun2);  // 打印结果:undefined
var a = 10;
// (function b(){})函数表达式会省略函数名称b,相当于匿名函数(function (){})
// 所以,typeof(b) --> undefined
if(function b(){}) {
    a += typeof(b);
}
console.log(a); // 打印结果:10undefined

#IIFE应用:配合闭包,解决作用域问题:

数组arr当中存储了10个匿名函数,还返回到了func函数之外,并且保存。从而,形成了10个闭包。
由于闭包的缘故,func函数里面的AO上下文,在func函数执行完成之后,也不会被释放。再等到10个匿名函数执行的时候,func-AO上下文里面变量i的值已经是10了。所以,最后打印结果为10个10。

function func(){
    var arr = [];
    for(var i = 0; i < 10; i++){
        arr[i] = function (){
            console.log(i);
        }
    }
    return arr;
}

var newArr = func();
for(var j = 0; j < 10; j++) {
    newArr[j]();
}
function func(){
    var arr = [];
    for(var i = 0; i < 10; i++){
        // 遍历10立即执行函数,且每个函数都有独立的作用域,里面的k值也不尽相同
        (function(k){
            arr[k] = function (){
                console.log(k);
            }
        })(i)
    }
    return arr;
}

var newArr = func();
for(var j = 0; j < 10; j++) {
    newArr[j]();
}



// 进一步优化
function func(){
    for(var i = 0; i < 10; i++){
        (function(){
            console.log(i);
        })()
    }
}
func();
上一篇 下一篇

猜你喜欢

热点阅读