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


Posted in Javascript onNovember 04, 2017

前言

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

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

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

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

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

总结

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

Javascript 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
JS中的模糊查询功能
Dec 08 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 #Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 #Javascript
简述Angular 5 快速入门
Nov 04 #Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 #Javascript
vue中使用localstorage来存储页面信息
Nov 04 #Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 #Javascript
You might like
解析PHP提交后跳转
2013/06/23 PHP
javascript中对对层的控制
2006/12/29 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python流程控制 if else实现解析
2019/09/02 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
2014年城管工作总结
2014/11/20 职场文书
收银员岗位职责范本
2015/04/07 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
总结高并发下Nginx性能如何优化
2021/11/01 Servers