100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 实例详解JavaScript中立即执行函数

实例详解JavaScript中立即执行函数

时间:2021-05-10 00:13:23

相关推荐

实例详解JavaScript中立即执行函数

web前端|js教程

JavaScript,js,执行

web前端-js教程

js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于JavaScript中立即执行函数的相关资料,需要的朋友可以参考下。

咻一咻源码,vscode怎么补齐变量,哪个ubuntu好用,tomcat操作详解,sqlite列出表的字段,酷6采集插件,前端开发框架ppt心得体会,r语言爬虫有什么作用,php如何读取文件,抚州网络seo推广,医院管理系统网站模板,如何分析网页源代码,留言与建议 模板lzw

前言

免签约即时到帐源码,VS是指vscode吗,ubuntu自动ip,tomcat 随机启动,sqlite试图,网页设计代码要点提炼,dede数据库介绍,阿里云 服务器连接,jquery radio 插件,前端art框架,爬虫灯飞利浦,php邮箱正则表达式,福州百度seo排名,springboot题库设计,织梦调用友情链接标签,三网合一网站开源,网页视频 php,bootstrap管理系统模板下载,上传无法登入后台,仿京东商城app页面源码,帝国小说管理系统破解版,点卡商城网站系统程序源码lzw

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。

有彩票源码就可以直接上线运营吗,ubuntu转换横屏,python提取网络爬虫,php 数组 均分,seo美食推广lzw

下面话不多说了,来一起看看详细的介绍吧。

通常我们声明一个函数有以下几种方式:

// 声明函数f1function f1() { console.log("f1");}// 通过()来调用此函数f1();//一个匿名函数的函数表达式,被赋值给变量f2:var f2 = function() { console.log("f2");}//通过()来调用此函数f2();//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名,可以不必和变量f3重名),被赋值给变量f3:var f3 = function f3() { console.log("f3");}//通过()来调用此函数f3();

如果你看过一些自定义控件的话你会发现他们大多数都是沿用这种写法:

(function() { " // 这里开始写功能需求 })();

这是我们常说的立即执行函数(IIFE),顾名思义,也就是说这个函数是立即执行函数体的,不需要你额外去主动的去调用,一般情况下我们只对匿名函数使用IIFE,这么做有两个目的:

一是不必为函数命名,避免了污染全局变量

二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

如果看到这两句话无法理解,那么先从IIFE的运行原理说起。

因为IIFE通常用于匿名函数,这里就用简单的匿名函数作为栗子:

var f = function(){ console.log("f");}f();

我们发现这里f只是这个匿名函数的一个引用变量,那么既然f()能够调用这个函数,我把f替换成函数本身可以么:

function(){ console.log("f"); }();

运行之后得到如下结果:

Uncaught SyntaxError: Unexpected token (

产生这个错误的原因是,Javascript引擎看到function关键字之后,认为后面跟的是函数声明语句,不应该以圆括号结尾。解决方法就是让引擎知道,圆括号前面的部分不是函数定义语句,而是一个表达式,可以对此进行运算,这里区分一下函数声明和函数表达式:

1、函数声明(即我们通常使用function x(){}来声明一个函数)

function myFunction () { /* logic here */ }

2、函数表达式(类似以这种的形式)

var myFunction = function () { /* logic here */ };var myObj = { myFunction: function () { /* logic here */ }};

小学我们就学过用()括起来的表达式会先执行,就像下面这样:

1+(2+3) //这里先运行小括号里面的内容没有意见撒

其实在javascript中小括号也有相似的作用,Javascript引擎看到function关键字会认为是函数声明语句,那么如果Javascript引擎优先看到小括号会怎么样:

//用小括号把函数包裹起来(function(){ console.log("f"); })();

函数成功执行了:

f //控制台输出

这种情况下Javascript引擎就会认为这是一个表达式,而不是函数声明,当然要让Javascript引擎认为这是一个表达式的方法还有很多:

!function(){}();+function(){}();-function(){}();~function(){}();new function(){ /* code */ }new function(){ /* code */ }() // 只有传递参数时,才需要最后那个圆括号。……

回到前面的问题,为什么说IIFE这种形式避免了污染全局变量,如果你见过别人写的jquery插件,里面通常会有类似这样的代码:

(function($){ " //插件实现代码})(jQuery);

这里的jquery其实是该匿名函数的参数,联想一下我们调用匿名函数时候是用f()那么匿名带参数的就是f(args)对吧,这里把jquery作为参数传入该函数,那么在函数内部使用形参$的时候就不会影响到外部环境,因为有些插件也会用到$这个限定符,你在这个函数内部可以随意折腾。

以上,在此过程中参考了以下两篇文章:

javascript立即执行某个函数:插件中function(){}()再思考

JavaScript中的立即执行函数

分析function前加运算符实现立即执行函数

JavaScript匿名、具名函数与立即执行函数IIFE详解

JS中的立即执行函数

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。