js中函数表达式和自执行函数表达式的用法总结
立即调用函数表达式
- 给函数体加大括号,在有变量声明的情形下,没有任何区别
- 但是,如果只是【自动执行】的情形下,就会不同
- 因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的
//以下情形并无差别
var count100 = function getCount100(){ return(100) }();//100
var count200 = (function getCount200(){ return(200) })();//200,加小括号和count100没有区别
var count = (function getCount(n){ return(n) })(300);//300,传参的情形
//不赋值变量,函数体加小括号,自动执行
(function aaa(){console.log("aaa")})();// aaa
console.log(aaa);//aaa is not defined
//一个匿名函数,函数体不加小括号,是不能自动执行的
function bbb(){console.log("bbb")}();//Unexpected token )
- 实际上【自执行函数表达式】可以有很多复杂的情形,比如下边的复杂例子
//函数声明置于小括号中,没有自执行
( function fn(){console.log("aaa");return "bbb"} );
console.log("fn res is " + fn);// fn is not defined
//函数声明置于小括号中,且自执行
( function fn(){console.log("aaa");return "bbb"}() );//输出aaa
console.log("fn res is " + fn);// fn is not defined
//函数声明置于小括号中,且自执行,注意,负责执行的一对小括号移到了外部
( function fn(){console.log("aaa");return "bbb"} )();//输出aaa
console.log("fn res is " + fn);// fn is not defined
//函数声明置于小括号中,函数未执行但将其赋值给fn
( fn = function aaa(){console.log("aaa");return "bbb"} )
console.log("fn res is " + fn());//fn res is bbb
//函数声明置于小括号中,函数执行,并且将其赋值给fn
( fn = function aaa(){console.log("aaa");return "bbb"}() );//输出aaa
console.log("fn res is " + fn);//fn res is bbb
//函数声明置于小括号中,将其赋值给fn,并且在外部执行之(注意末尾小括号位置)
( fn = function aaa(){console.log("aaa");return "bbb"} )();//输出aaa
console.log("fn res is " + fn());//再次输出aaa,并输出fn res is bbb
// 匿名函数在自执行,注意末尾小括号位置
( function(){console.log("aaa");return "bbb"} )();//输出aaa
// 匿名函数在自执行,可见和上边的例子效果一致
( function(){console.log("aaa");return "bbb"}() );//输出aaa
//在括号外赋值的函数表达式,例一。以下三例的结果是一致的
var fn = function aaa(){return "bbb"}();
console.log("fn is res " + fn);//fn is res bbb
//例二
var fn = (function aaa(){return "bbb"})();
console.log("fn is res " + fn);//fn is res bbb
//例三
var fn = (function(){return "bbb"})();
console.log("fn is res " + fn);//fn is res bbb
-------
//正常的函数,注意fn的name属性自动设置为fn
function fn(){return "bbb"};
console.log(fn.name);//fn
console.log("fn is res " + fn());//fn is res bbb
//函数表达式,注意fn的name属性是fn
var fn = function(){return "bbb"};
console.log(fn.name);//fn
console.log("fn is res " + fn());//fn is res bbb
//函数表达式,注意fn的name属性是aaa
var fn = function aaa(){return "bbb"};
console.log(fn.name);//aaa
console.log("fn is res " + fn());//fn is res bbb
对于如此多的不同情形,可以总结如下:
- 在不赋值的情形下,在小括号中的函数或者函数表达式,被阻止声明为一个全局的变量,同时其内部是可执行的
- 但如果其在小括号中,被赋值给了某一变量,那么该函数或者函数表达式就会被曝露出去,可以在外部调用
- 函数表达式在赋值给一个变量时,该变量会拥有一个name属性,它的值取决于函数表达式是否为匿名函数
- 如果为匿名函数,则变量的name属性值为自身,如果为具名函数,则变量的name属性值为具名函数的name值
- 影响表达式执行的末尾的一对小括号,对词法上的影响很小
- 即,影响函数表达式的因素,由大到小是: 赋值与否 => 匿名与否 => 何时执行
js中函数表达式和自执行函数表达式的用法总结的更多相关文章
- js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id ...
- js中escape对应的C#解码函数 UrlDecode
js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s),使用过程中有以下几点需要注意 js中escape对应的C#解码函数 System.We ...
- js中bind、call、apply函数的用法
最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...
- js中bind、call、apply函数的用法 (转载)
最近看了一篇不错的有关js的文章,转载过来收藏先!!! 最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web 的项目,然后在腾讯实习的时候用 j ...
- js中各个排序算法和sort函数的比较
js中要实现数据排序,其实只需要用sort函数就能很好的满足了,但是我今天想知道他和其他排序算法的区别,比如耗时呀等.测了一组数据如下: // ---------- 一些排序算法 Sort = {} ...
- JS中的提升(即变量和函数声明移动到代码顶部)
先看代码(第一个代码片段): console.log(a); var a = 1; 如果你认为这是一段不合法的代码,在调用console.log()的时候会输出undefined,你完全正确.但是如果 ...
- 关于JS中涉及的常用类型转换及运算符表达式
JS中的常用类型转换(一般用强制转换):1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); ...
- js中return,return true,return false三者的用法及区别
return其实就是return undefined; 1.语法及返回方式 ①返回控制与函数结果 语法为:return 表达式; 语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去 ...
- js中return false,return,return true的用法及差别
起首return作为返回关键字,他有以下两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,并且把表达式的值作为函数的成果 2.返回把握无函数成果 ...
随机推荐
- Shell语言
1.shell脚本规范以.sh结尾 2.运行 3.赋予权限,查询shell的执行过程 输出时间的 输出日历 输出一年的日历 修改语言 计算机 read –t 3 –p “1111111111” # ...
- 【二代示波器教程】第14章 uCOS-III操作系统版本二代示波器实现
第14章 uCOS-III操作系统版本二代示波器实现 本章教程为大家讲解uCOS-III操作系统版本的二代示波器实现.主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任 ...
- 最新Java技术
最近在网上查资料碰到好多没接触过的技术,先汇总在这里备用,以后慢慢吸收 1. JNA JNI的替代品,调用方式比JNI更直接,不再需要JNI那层中间接口,几乎达到Java直接调用动态库 2. Smal ...
- LeetCode题解39.Combination Sum
39. Combination Sum Given a set of candidate numbers (C) (without duplicates) and a target number (T ...
- CSS3禁止用户选中文字——user-select: none;
需求:现在有一个需求是在移动端让你禁止用户选中文字,你会怎么做呢?如下图 解决方法:使用CSS3新增属性 user-select: none; -webkit-user-select:non ...
- [Swift]LeetCode807. 保持城市天际线 | Max Increase to Keep City Skyline
In a 2 dimensional array grid, each value grid[i][j]represents the height of a building located ther ...
- ubuntu(版本14.04)部署Core环境
遇到问题: 参照官方文档敲完命令之后 出现了提示的问题Unable to lpcate package... ,随后参照官方文档解决方案,又出现了如下问题: 提示找不到依赖的Runtime,在尝试过很 ...
- RxJS简介
函数式编程 1.声明式(Declarativ) 和声明式相对应的编程⽅式叫做命令式编程(ImperativeProgramming),命令式编程也是最常见的⼀种编程⽅式. //命令式编程: funct ...
- BBS论坛(七)
7.1.修改邮箱界面完成 (1)cms/cms_resetemail.html {% extends 'cms/cms_base.html' %} {% block title -%} 修改邮箱 {% ...
- Javascript sort方法
sort()方法用于对数组的元素进行排序 语法:array.Object.sort(sortBy) sortBy:可选.规定排序顺序.必须是函数 返回值:对数组的引用.数组在原数组上进行排序,不生成副 ...