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 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 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中文分词 自动获取关键词介绍
2012/11/13 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
Vue表单实例代码
2016/09/05 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python内置函数delattr的具体用法
2017/11/23 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python实现图片横向和纵向拼接
2020/03/05 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
演讲稿祖国在我心中
2014/05/04 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
学校就业推荐信范文
2014/05/19 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
财务稽核岗位职责
2015/04/13 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python