深入理解js立即执行函数

看过jQuery源码的人应该知道,jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),开发者们想到的解决办法就是使用立即执行函数。

1.什么是立即执行函数(IIFE)

在了解立即执行函数之前先明确一下函数声明、函数表达式及匿名函数的形式,如下图:

接下来看立即执行函数的两种常见形式:( function(){…} )()和( function (){…} () ),一个是一个匿名函数包裹在一个括号运算符中,后面再跟一个小括号,另一个是一个匿名函数后面跟一个小括号,然后整个包裹在一个括号运算符中,这两种写法是等价的。要想立即执行函数能做到立即执行,要注意两点,一是函数体后面要有小括号(),二是函数体必须是函数表达式而不能是函数声明。先看下图:

从图中可以看出,除了使用()运算符之外,!,+,-,=等运算符都能起到立即执行的作用。这些运算符的作用就是将匿名函数或函数声明转换为函数表达式,如下图所示,函数体是函数声明的形式,使用运算符将其转换为函数表达式之后就可达到立即执行效果:

2.使用立即执行函数的好处

通过定义一个匿名函数,创建了一个新的函数作用域,相当于创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。此时若是想访问全局对象,将全局对象以参数形式传进去即可,如jQuery代码结构:

其中window即是全局对象。作用域隔离非常重要,是一个JS框架必须支持的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

(0)

相关推荐

  • Python入门:Python基本运算符汇总

    Python入门第五步熟练Python基本运算符,之前的文章中我们已经对于Python下载安装以及专属编码pycharm的下载安装都做了详细介绍,基本语法以及变量数据等等的讲解,今天咱们一起来学一下P ...

  • JavaScript(六)-函数

    函数:定义函数 定义方式 第一种定义方式:可在后面定义前面调用.可提前调用 function gg(){ console.log("函数内部的代码"); } 第二种定义方式:必须先 ...

  • JavaScript基本语法(全)

    JavaScript JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思) 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行 ...

  • JavaScript基础

    一 JavaScript 简介1 JavaScript基本介绍1 JavaScript 简称JS,是一种动态的弱类型脚本解释型语言,和HTML,CSS并成为三大WEB核心技术,得到了几乎所有主流浏览器 ...

  • Nice!JavaScript基础语法知识都在这儿了

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star ⭐⭐⭐⭐⭐转载请注明出处!⭐⭐⭐⭐⭐ 链接:https:/ ...

  • 「学习笔记」JavaScript基础

    前言 最近一直在跟着黑马教程学习JavaScript内容,遂把这一阶段的学习内容整理成笔记,巩固所学知识,同时也会参考一些博客,书籍上的内容,查漏补缺,给自己充充电

  • JS自执行函数,匿名函数

    自执行函数 先来看个最简单的自执行函数 (function(){ }()); 相当于声明并调用 var b=function () { }b() 自执行函数也可以有名字 function b(){ . ...

  • 用一个例子理解JS函数的底层处理机制

    个人笔记,如有错误烦请指正 以下面代码的运行举例,一行行进行运行的解析 var x = [12, 23]; function fn(y) { y[0] = 100; y = [100]; y[1] = ...

  • 深入理解C语言main函数的参数

    文/Edward  1  命令就是程序 我想绝大多数看这篇文章的读者基本上都用过Windows操作系统下的命令提示符.比起图形化界面的操作,如果熟悉了Windows的命令提示符,你将会更快地操作这个操 ...

  • 深入理解LOOKUP:LOOKUP函数的查找原理

    最近推送的五篇文章: Excel中照相机居然有如此妙用,引用照片.做仪表盘就靠它了 [扩展]新手进阶必学的三个函数③:最佳劳模SUMPRODUCT函数,这篇必须收藏! [扩展]新手进阶必学的三个函数② ...

  • JS 终止执行的方法

    我们在前端执行判断时如果条件不成立就让他禁止执行后边的程序 分三种方法: 一)在function里面 (1)return; (2)return false; (二)非function方法里面 aler ...

  • js 高阶函数reduce ——数组取交集、并集

    两个数组取交集 vs 多个数组取交集 => js reduce函数的妙用 1.reduce函数的用法及取数组交集 <script> // 值集数组 let arr1 = [1,2] ...

  • Vue父子组件生命周期执行顺序及钩子函数的理解

    每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数), ...

  • FIND函数基础入门与深入理解

    Excel情报局 OFFICE 爱好者大本营 用 1% 的Excel 基础 搞定 99%的 职场工作 做一个有价值感的Excel公众号 Excel是门手艺   玩转需要勇气 数万Excel爱好者聚集地 ...

  • 通达信关于臭名昭著未来函数 ZIG之字转向 (我的应用与理解)

    关于臭名昭著--未来函数 ZIG之字转向 --{我的应用与理解} 一{之字转向VS波峰和波谷 } ZIG--理论 ZIG(X,N) 之字转向 函数:ZIG(X,N) 描述:之字转向 类别:指标 参数: ...