理解javascript中的立即执行函数(function(){})()
来源:互联网 发布:mac如何返回桌面 编辑:程序博客网 时间:2024/04/27 03:45
之前看了好多代码,都有用到这种函数的写法,但是都没认真的去想为什么会这样写,今天开始想学习下jquery的源码,发现jquery也是使用这种方式,用(function(window, undefined){})(window)包裹内部代码,于是进一步的去学习了下。
要理解立即执行函数(function(){})(),先了解些函数的基本概念(函数声明、函数表达式、匿名函数)。
函数声明:使用function声明函数,并指定函数名。
function setFn() { // coding }
函数表达式:使用function声明函数,但未指定函数名,将匿名函数赋予一个变量。
var setFn = function() { // coding}
匿名函数:使用function关键字声明函数,但未指定函数名。匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。
function() { // coding}
函数声明与函数表达式的不同在于:
1. 函数声明可在当前作用域下提前调用执行,函数表达式需等执行到该函数后,方可执行,不可提前调用。
setFn()function setFn() { // coding }// 正常,函数声明可提前调用setFn()var setFn = function() { // coding} // 报错,setFn未保存对函数的引用,函数调用需放在函数表达式后面
2. 函数表达式可直接在函数后加括号调用。
var setFn = function() { console.log(2)}()// 2 解析至此,可直接执行调用
立即执行函数(function(){})()可以看出很像函数表达式的调用,但为什么要加括号呢?如果不加括号:
function(){ console.log(1)}()// 报错,函数需要函数名
解析: 虽然匿名函数属于函数表达式,但未进行赋值,所以javascript解析时将开头的function当做函数声明,故报错提示需要函数名
立即执行函数里面的函数必须是函数表达式,所以由var setFn = function() {}()可以理解为在匿名函数前加了 = 运算符后,将函数声明转化为函数表达式,所以拿!,+,-,()...等运算符来测试下是否如此。
!function(){ console.log(1)}()// 1 +function(){ console.log(2)}()// 2 -function(){ console.log(3)}()// 3 (function(){ console.log(4)})()// 4
由此可见,加运算符确实可将函数声明转化为函数表达式,而之所以使用括号,是因为括号相对其他运算符会更安全,可以减少不必要的麻烦。
立即执行函数与正常函数传参形式是一致的。
(function(a, b){ console.log(a + b);})(1, 2)// 3
(function(){}())这样写的好处是在内部定义的变量不会跟外部的变量有冲突,达到保护内部变量的作用。
- 理解javascript中的立即执行函数(function(){})()
- 理解javascript中的立即执行函数(function(){})()
- 理解javascript中的立即执行函数(function(){})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解JavaScript中的立即执行函数(function(){.....})()
- 深入理解JavaScript中的立即执行函数(function(){……})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 深入理解javascript中的立即执行函数(function(){…})()
- 关于<<C++ Primer>>第五版P113页代码的一个小解析
- 《大型网站技术架构:核心原理于案例分析》读书笔记(一)
- STM32-新建工程,点亮led
- Composer快速入门
- 【表单验证】一个新手做的 大家多多指教
- 理解javascript中的立即执行函数(function(){})()
- 输入一个整数a,再输入两个整数p(p<32),v(0|1),将该整数a的p位设置为v,输出修改后的该整数的二进制表示.
- Dialog的使用
- 来看属于地球的“手机home”键,乔布斯离世遗作-uc头条报道
- 每天一题LeetCode[第七天]
- Android中WebView加载Url时出现域名连接重定向时返回控制死循环的问题
- 一个基于注解的orm简单实现(二):实现思路
- java序列化与反序列化
- 解决安装gulp时 %1 is not a valid Win32 application 的问题