深入浅析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 相关文章推荐
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
vue一步步实现alert功能
Jul 05 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
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将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
php表单处理操作
2017/11/16 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
看了就知道什么是JSON
2007/12/09 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python pandas如何向excel添加数据
2020/05/22 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
农贸市场管理制度
2014/01/31 职场文书
食品业务员岗位职责
2014/03/18 职场文书
幸福家庭标语
2014/06/27 职场文书
毕业欢送会致辞
2015/07/29 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
golang为什么要统一错误处理
2022/04/03 Golang
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL