深入浅析javascript立即执行函数


Posted in Javascript onOctober 23, 2015

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花;
当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。

 JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname()
{
这里是要执行的代码
}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

( function(){…} )()  和  ( function (){…} () )  是两种javascript立即执行函数的常见写法;

最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的;
后来发现加括号的原因并非如此。要理解立即执行函数,需要先理解一些函数的基本概念。

函数声明、函数表达式、匿名函数

函数声明: function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。

函数表达式: var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。

匿名函数: function () {}; 使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

函数声明和函数表达式不同之处:

一、Javascript引擎在解析javascript代码时会 "函数声明提升" (Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式;

二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。

例子:

fnName(); 
 function fnName(){ 
  ... 
 } 
 //正常,因为"提升"了函数声明,函数调用可在函数声明之前 
 fnName(); 
 var fnName = function(){ 
  ... 
 } //报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
 var fnName = function(){ 
  alert("Hello World"); 
 }(); 
 //函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数 
 function fnName(){ 
  alert("Hello World"); 
 }(); 
 //不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用 
 function(){ 
  console.log("Hello World"); 
 }();
 //语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作, 
//所以javascript引擎将开头的function关键字当做函数声明,

报错:要求需要一个函数名

在理解了一些函数基本概念后,回头看看 ( function(){…} )() 和 ( function (){…} () ) 这两种立即执行函数的写法,

最初我以为是一个括号包裹匿名函数,并后面加个括号立即调用函数,当时不知道为什么要加括号;

后来明白,要在函数体后面加括号就能立即调用,则这个函数 必须是函数表达式,不能是函数声明。

( function(a){ 
  console.log(a); //firebug输出123,使用()运算符 
 })(123); 
 ( function(a){ 
  console.log(a); //firebug输出1234,使用()运算符 
 }(1234)); 
 ! function(a){ 
  console.log(a); //firebug输出12345,使用!运算符 
 }(12345); 
 + function(a){ 
  console.log(a); //firebug输出123456,使用+运算符 
 }(123456); 
 - function(a){ 
  console.log(a); //firebug输出1234567,使用-运算符 
 }(1234567); 
 var fn= function(a){ 
  console.log(a); //firebug输出12345678,使用=运算符 
 }(12345678)

可以看到输出结果,在function前面加!、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、+、-、=等运算符, 都将 函数声明转换成函数表达式, 消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。

  加括号是最安全的做法,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

  不过这样的写法有什么用呢?

javascript中没用私有作用域的概念,如果多人开发的项目上,在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉。

根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个"容器","容器"内部可以访问外部的变量,而外部环境不能访问"容器"内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称"匿名包裹器"或"命名空间"。

JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中, 在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。

以上内容是小编给大家介绍的javascript立即执行函数,希望大家喜欢。

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
js判断手机号运营商的方法
Oct 23 #Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 #Javascript
js计算文本框输入的字符数
Oct 23 #Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 #Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 #Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 #Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 #Javascript
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
laravel5.6实现数值转换
2019/10/23 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
深入浅析javascript继承体系
2017/10/23 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
python 发送get请求接口详解
2020/11/17 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
社区学习十八大感想
2014/01/22 职场文书
高一物理教学反思
2014/01/24 职场文书
保护环境建议书300字
2014/05/13 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
安全责任书模板
2014/07/22 职场文书
兽医医药专业求职信
2014/07/27 职场文书
财务整改报告范文
2014/11/05 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
基于Python实现流星雨效果的绘制
2022/03/18 Python