当前位置:首页 > 日记 > 正文

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

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

前言

js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行。

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

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

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

// 声明函数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中的立即执行函数

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

相关文章

ps怎么编辑选区? ps对选区进行基础

ps怎么编辑选区? ps对选区进行基础

方法,基础操作,选区,编辑,电脑软件,ps中想要对选区进行操作,比如移动和反选选区,选区的编辑与应用,选区的调整,该怎么实现呢?下面我们就来看看详细的教程。软件名称:Adobe photoshop 7.01 官方正式简体中文版软件大小:154MB更新时间:2013-04-191、…

Spring 事务隔离与事务传播的详解

Spring 事务隔离与事务传播的详解

事务隔离,详解,事务,电脑软件,Spring,Spring 事务隔离与事务传播的详解与对比Spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作。今天一起学习一下Spring的事务管理。Spring的事务管理分为声明式跟编程式。声明式就是在Spring的配…

Photoshop打造绚丽的烟花字体

Photoshop打造绚丽的烟花字体

字体,绚丽,烟花,电脑软件,Photoshop,利用Photoshop这款强大的图片编辑软件来打造绚丽的烟花字体,来装点你的生活吧。1、打开Photoshop,新建一个800*800大小的文件。背景填充为黑色。2、创建文字图层,本次以“新年快乐”为例,字体为&l…

Node.js利用断言模块assert进行单

Node.js利用断言模块assert进行单

单元测试,断言,模块,方法,电脑软件,前言对于NodeJS, assert模块提供了一系列的断言测试,其实这个模块主要倾向于内部使用,但是也能被用于项目中, 可以通过require(‘assert')的方式引入,下面本文将给大家介绍关于Node.js用断言模块assert进…

微信小程序 同步请求授权的详解

微信小程序 同步请求授权的详解

授权,同步请求,详解,程序,电脑软件,微信小程序 同步请求授权的详解需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权。 ([‘scope.userInfo',‘scope.userLocation',‘scope.address',‘scope.record',‘scope…

JavaScript实现跟随滚动缓冲运动广

JavaScript实现跟随滚动缓冲运动广

运动,广告,电脑软件,JavaScript,当我们浏览一些网页时我们会发现页面的的边上会有广告图片,当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动(这里我叫它为广告框)。一些网页的广告框是固定在浏览器上的用background:fixed;便可实现。这…

JavaScript之Date_动力节点Java学

JavaScript之Date_动力节点Java学

学院,节点,动力,电脑软件,JavaScript,在JavaScript中,Date对象用来表示日期和时间。要获取系统当前时间,用:var now = new Date();now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)now.getFullYear(); // 2015, 年份now.getMonth(); // 5, 月…

angularJS+requireJS实现controlle

angularJS+requireJS实现controlle

按需加载,示例,电脑软件,requireJS,angularJS,最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果…

PS怎么设计等高线效果的背景图?

PS怎么设计等高线效果的背景图?

背景图,等高线,效果,电脑软件,PS,制作简单的背景图片软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建一个背景图层如图大小 2、然后利用矩形工具画一个500乘500像素的矩形如图所示3、给这个矩形…

15/18位身份证号码验证的正则表达

15/18位身份证号码验证的正则表达

正则表达式,验证,身份证号码,详细,电脑软件,前言开发过程中,常常需要对一些输入信息进行有效性验证,使用正则表达式进行校验是最简单、效率最高的方式了,下面就来看看15/18位身份证号码验证的正则表达式吧。介绍xxxxxx yyyy MM dd 375 0 …

jQuery中each循环的跳出和结束实例

jQuery中each循环的跳出和结束实例

循环,实例,结束,电脑软件,jQuery,Query中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用return,break 用return falsecontinue …

ppt支持什么格式的视频

ppt支持什么格式的视频

支持,视频格式,格式,视频,电脑软件,  PPT支持的视频格式十分有限,一般可以插入WMV、MPEG-1(VCD格式)、AVI。但由于AVI的压缩编码方法很多,并不是所有的AVI格式都支持。下面就跟着小编看看PPT2007支持那种格式吧,常用ppt的朋友值得一看哦,欢迎…