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 window.setTimeout() 的详细用法
Nov 04 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
angular实现form验证实例代码
Jan 17 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 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中路径问题的解决方案
2006/10/09 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
javascript常用的设计模式
2017/02/09 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Django 批量插入数据的实现方法
2020/01/12 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
招商业务员岗位职责
2013/12/16 职场文书
八年级数学教学反思
2014/01/31 职场文书
演讲主持词
2014/03/18 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis