美文网首页
JS重要概念之立即执行函数与闭包高级

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

作者: 张先觉 | 来源:发表于2020-11-10 11:19 被阅读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
  • (重点)搞清楚函数表达式例如:(function b(){}),与函数声明function b(){}的区别?
var a = 10;
// (function b(){})函数表达式会省略函数名称b,相当于匿名函数(function (){})
// 所以,typeof(b) --> undefined
if(function b(){}) {
    a += typeof(b);
}
console.log(a); // 打印结果:10undefined

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

  • 分析下列函数,为何打印结果为10个10?

数组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]();
}
  • 如何修改上面代码,让其打印结果为0-9?
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();

相关文章

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

    #立即执行函数表达式IIFE,简称“立即执行函数” 立即执行函数表达式,IIFE(immediately-invo...

  • 立即执行函数形成的闭包

    闭包是js中比较难以理解的概念,今天在敲立即执行函数的时候突然有感,稍作分析,聊表心意 闭包的概念简记 阮一峰的一...

  • 闭包与立即执行函数

    在学习js的过程中,我们都会遇到闭包和立即执行函数的相关概念,今天就这两个概念做一个大致的整理。 本文结构: 闭包...

  • javascript立即执行函数和闭包

    闭包 概念:当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链举例分析: 闭包的应用: 立即执行函数 ...

  • JavaScript闭包(三)

    目录 1.执行环境与作用域链 2. 立即执行函数 3. 闭包知识点 3.1 什么是闭包 3.2 使用闭包的意义与注...

  • JS(十)闭包、立即执行函数

    写在最前面 正文开始 首先这个函数在执行return b之后,函数就a执行完了,会销毁a的AO,,但是在销毁之前函...

  • 理解闭包

    什么是「闭包」。 「闭包」的作用是什么。在一个立即执行函数当中: 首先,假设以上几行代码运行在立即执行函数当中,那...

  • IIFE(Immediately-invoked functio

    一、立即执行函数五花八门的写法: 二、立即执行函数与闭包的暧昧关系 像普通的函数传参一样,立即执行函数也能传参数。...

  • 023 JS高级

    JS高级 一、函数高级 1、函数回调 2、闭包 二、循环绑定 三、面向对象JS 1、属性与方法 2、类字典结构使用...

  • es5核心技术

    立即执行函数 函数提升和变量提升 闭包 this 原型链实现继承

网友评论

      本文标题:JS重要概念之立即执行函数与闭包高级

      本文链接:https://www.haomeiwen.com/subject/krwlbktx.html