当前位置: 首页 > Web前端 > vue.js

前端开发:立即执行函数(function(){}())和(function(){})()的区别

时间:2023-03-31 22:25:42 vue.js

前言在前端开发过程中,JS中的原理和知识点是司空见惯,但有时在开发中会忽略一些细节和不经意的知识点,尤其是刚入行的新开发者,一知半解,整体使用JS时会遗漏一些东西。那么本篇博文就JS中的立即执行函数相关的比较和使用做一个总结,方便大家参考和使用。什么是立即执行的功能?声明一个函数,然后立即调用该函数。此时,该函数是立即执行的函数。换句话说,函数在函数声明后立即执行。).通常,立即执行的函数以匿名函数的形式声明。匿名函数的格式为function(){},即使用关键字function来声明函数,函数没有命名。但是,匿名函数不能直接单独使用。用括号()把它包起来,否则会报错。立即执行函数的作用立即执行函数的作用有三方面:为避免污染全局变量,声明函数不设置函数名;通过创建一个独立的作用域,作用域内的变量和其他内容不在作用域之外访问,避免声明的变量相互污染;JS中一个常见的经典知识点,闭包的实现,数据私有化的设置。语法立即写函数有两种方式,如下://写法1:用括号将整个函数定义和括号调用包裹起来(function(){//函数体...}())//写法2:用圆括号只把函数的定义包起来,然后加上圆括号调用(function(){//函数体...})()需要注意的是圆括号的使用是因为浏览器的JS引擎规定如果函数放在第一行,就会被解析成一条语句。但是在使用立即执行函数时,浏览器的JS引擎需要将函数解析成表达式,所以使用括号来解决问题。问题。实际函数编写场景这里简单的对比一下普通函数和匿名函数。普通函数和匿名函数按顺序表示相同的函数。具体对比如下:1.普通函数形式functionbar(){console.log("HelloJavaScript!")}()//直接在声明的函数后面加()会报错(functionbar(){console.log("HelloJavaScript!")}())//使用括号将整个函数表达式包裹起来即可正常执行(functionbar(){console.log("HelloJavaScript!")})()//把函数包裹在括号里也能正常执行!functionbar(){console.log("HelloJavaScript!")}()//使用!否定,只是为了通过JS语法检查。+functionbar(){console.log("HelloJavaScript!")}()//使用+可以正常执行,只是为了通过JS语法检查。-functionbar(){console.log("HelloJavaScript!")}()//使用-可以正常执行,只是为了通过JS语法检查。~functionbar(){console.log("HelloJavaScript!")}()//使用~可以正常执行,只是为了通过JS语法检查。voidfunctionbar(){console.log("HelloJavaScript!")}()//使用void可以正常执行,只是为了通过JS语法检查。newfunctionbar(){console.log("HelloJavaScript!")}()//使用new可以正常执行,只是为了通过JS语法检查。2.匿名函数形式log("匿名函数!")}()+function(){console.log("匿名函数!")}()-function(){console.log("匿名函数!")}()~function(){console.log("匿名函数!")}()voidfunction(){console.log("匿名函数!")}()newfunction(){console.log("匿名函数!")}()在上面普通函数和匿名函数的比较中,函数使用了!、+、-、=等运算符,可以使它们起到立即执行的作用,从而可以将函数声明直接转换为函数表达式,帮助浏览器JS引擎将它们识别为函数表达式,而不是函数声明。立即执行函数传递参数如果立即执行的函数需要使用函数外的变量,这需要使用传递参数的方法来解决。立即执行函数内部使用的形参是函数内部传递的外部变量,进入立即执行函数本身的范围,不受外部变量的影响。具体使用场景如下:(function(a){//使用的形参是外部变量console.log(a)}传入函数。(b)立即执行函数和其他函数的返回值同样可以返回任意类型的值,主要是通过返回值来实现闭包需求,具体例子如下:varres=(function(){varaaa=123456;returnfunction(){returnaaa;}})()//立即执行函数的返回值是一个函数,所以需要通过()调用console.log(res())//输出结果为:123456这里需要扩展,立即执行执行函数和闭包的一个共同优点是可以减少全局变量的使用。但它们也不同。立即执行函数只是调用函数的一种方式。它在声明后立即执行。一般这类函数只会被调用一次,调用后会立即销毁,不会占用内存;但是闭包主要是允许外部函数访问内部函数的作用域。虽然也减少了全局变量的使用,保证了内部变量的安全,但是由于引用的内部变量无法销毁,增加了内存消耗,使用不当非常严重。很容易造成内存泄漏。(function(){}())和(function(){})()的区别通过上面对立即执行函数的介绍,(function(){}())和(function(){})()这个问题的区别是从不同的角度来看,但是从最终的结果来看,两者并没有什么区别,它们是一回事,得出这个结论的依据是(function(){}())和(function的(){})()的AST是一样的,最终结果是一次性函数调用,和最终解析器产生的结果没有区别。它们的功能也一样:创建一个函数,立即调用执行。最终结果是:(function(){}())和(function(){})()没有区别,它们是一样的,不仅可以立即执行函数,还可以模拟块级作用域。最后,通过上面介绍的(function(){}())和(function(){})()的区别总结,你是否彻底掌握了相关的知识点和使用原则呢?这个知识点非常重要,无论是在实际开发过程中还是在求职面试中,都是高频知识点,所以一定要彻底掌握,尤其是Vue初学者,这里就不再赘述了重要性。以上就是本章的全部内容。欢迎关注三掌柜微信公众号“三掌柜程序员”,三掌柜新浪微博“三掌柜666”,欢迎关注!本文参加了“SegmentFault思维写作挑战赛”,正在阅读的朋友欢迎加入。