进击的 JavaScript(五) 之 立即执行函数与闭包

简介:

原文链接:周大侠啊 进击的 JavaScript(五) 之 立即执行函数与闭包

前面的闭包中,提到与闭包相似的立即执行函数,感觉两者还是比较容易弄混吧,严格来说(因为犀牛书和高程对闭包的定义不同),立即执行函数并不属于闭包,它不满足闭包的三个条件。


一、圆括号运算符

  圆括号运算符也叫分组运算符,它有两种用法:如果表达式放在圆括号中,作用是求值;如果跟在函数后面,作用是调用函数

  把表达式放在圆括号之中,将返回表达式的值

console.log((1+2)); // 3

  将函数放在圆括号中,会返回函数本身。如果圆括号紧跟在函数的后面,就表示调用函数,即对函数求值

console.log((function testa(){return 666;}));
// function testa(){return 666;}

console.log(function testa(){return 666;}());
// 666

注意:圆括号运算符不能为空,否则会报错

();//SyntaxError: Unexpected token )

由于圆括号的作用是求值,如果将语句放在圆括号之中,就会报错,因为语句没有返回值

(var a = function(){return 666});
// SyntaxError: Unexpected token var


二、函数声明

使用 function 关键字创建一个函数,并且后面带有函数名,叫函数声明。

function testa(){}


三、匿名函数

那么使用 function 关键字创建的函数不带函数名呢? 那就是匿名函数了。

function (){}


四、函数表达式

那么把匿名函数赋值给一个变量呢?那就是函数表达式了。

var testa = function (){}

其实呢,函数表达式的根本所在,就是阻止了js引擎把 function创建的函数 当作函数声明来解析。下面再详说。


五、立即执行函数(IIFE)

那么立即执行函数呢?

function定义函数之后,立即调用该函数。这种函数就叫做立即执行函数,全称为立即调用的函数表达式IIFE(Imdiately Invoked Function Expression)

1、在本系列进击的 JavaScript(三)中到过,代码执行时,会先对函数声明的函数 进行解析(函数声明提升),而函数表达式,当逐行执行到它时,才会解析。

2、正因为函数声明的提升,导致函数声明不能立即执行。因为,函数声明时,js只会解析到大括号(})就结束了,如果后面有(),只是一个圆括号运算符。

function testa(){
    console.log("testa")
}("666")

//"666"
//如果后面是一个空的圆括号,会报错,上面提到过。

所以,不知道,你有没有发现,函数声明的函数,后面可以不用分号(;)分隔,也可以正常执行,而函数表达式的后面就必须加分号,不然会报错。你可以自己写个小栗子验证下。

3、匿名函数是不能单独写的,所以就提不上立即执行了。

function (){}
//Uncaught SyntaxError: Unexpected token (

单独写匿名函数,是会报错的,js引擎 会把它当作函数声明来解析,而函数声明就必须要有个函数名,所以会报错。
所以,你通常看到使用匿名函数,都是当作参数传递的,或者把匿名函数转为函数表达式。

4、因此,只有函数表达式可以立即执行

var testa = function (){
    console.log("testa")
}()
//"testa"

上面提到过,函数表达式,就是阻止了js引擎把 |用function创建的函数| 当作函数声明来解析。

注:javascript引擎规定,如果function关键字出现在行首,一律解释成函数声明语句。

所以,解决方法就是不要让function出现在行首,让引擎将其理解成一个表达式。

//常用的两种,使用圆括号运算符
(function(){console.log("666")})()
(function(){console.log("666")}())

//一元运算符写法
!function(){console.log("666")}()
+function(){console.log("666")}()
-function(){console.log("666")}()
~function(){console.log("666")}()

都是都可以把函数声明 转为 函数表达式,也就是阻止了把其当作函数声明解析。


六、立即执行函数在闭包中的应用

1、立即执行函数能配合闭包保存状态。

来看下 上节内容中闭包的例子:

function makeClosures(i){    
    var i = i;  
    return function(){
        console.log(i);     
    }
}

for (var i=1; i<=5; i++) {
    setTimeout(makeClosures(i),i*1000);  
}
//1
//2
//3
//4
//5

现在,我们来利用立即执行函数来简化它:

for (var i=1; i<=5; i++) {
    setTimeout((function(i){
        return function(){
            console.log(i);
        }
    })(i),i*1000);
}

第一个匿名函数执行完毕后,返回了第二个匿名函数。第二个匿名函数被当做setTimeout 的第一个参数传入进去。因为 setTimeout函数执行了5次,所以立即执行函数里每次都会返回了一个没有被执行的匿名函数,(这里就是返回了5个匿名函数),每个匿名函数内部保存着每次传进来的i值,因此,每个i 都是不一样的,所以,就得到了想要的结果

2、立即执行函数配合闭包 模块化中应用

(function(){
    var meg = "hello zdx";
    
    function say(arg){
        arg = arg || meg;
        console.log(arg)
    }
    
    window.say = say;
})(window)

window.say();

//"hello zdx"

首先立即执行函数,它是个匿名函数,你是得不到它的函数引用,这样,就避免了全局变量污染。其次,由于函数作用域的规则,在匿名函数外部是访问不了函数内的变量,函数等的。所以,也经常用立即执行函数模拟块级作用域。

相关文章
|
6月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
268 19
|
10月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
239 70
|
8月前
|
存储 JavaScript 前端开发
|
8月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
10月前
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
414 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
10月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
213 32
|
9月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发
js 闭包的优点和缺点
【10月更文挑战第27天】JavaScript闭包是一把双刃剑,在合理使用的情况下,它可以带来很多好处,如实现数据封装、记忆功能和模块化等;但如果不注意其缺点,如内存泄漏、变量共享和性能开销等问题,可能会导致代码出现难以调试的错误和性能问题。因此,在使用闭包时,需要谨慎权衡其优缺点,根据具体的应用场景合理地运用闭包。
334 58
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。

热门文章

最新文章