js中(function(){}()),(function(){})(),$(function(){});之间的区别
1. (function(){}())与(function(){})()
这两种写法,都是一种立即执行函数
的写法,即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。
通常的函数声明和调用分开的写法如下:
function foo() {/*...*/} // 这是定义,Declaration;定义只是让解释器知道其存在,但是不会运行。
foo(); // 这是语句,Statement;解释器遇到语句是会运行它的。
- 1
- 2
- 3
普通的函数声明function foo(){}
是不会执行的。这里如果直接这样写function foo(){}()
解释器会报错的,因为是错误的语法。
IIFE函数的调用方式通常是将函数表达式、它的调用操作符、分组操作符放到一个括号内,来告诉解释器这里有一个需要立即执行的函数。否则通常情况下,解析器遇到一个function
关键字,都会把它当做是一个函数声明,而不是函数表达式。
如下几种写法都是可以的:
(function foo(){/*...*/}());
(function foo(){/*...*/})();
!function foo() {/*...*/}();
+function foo() {/*...*/}();
-function foo() {/*...*/}();
~function foo() {/*...*/}();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
在需要表达式的场景下,就不需要用括号括起来了:
void function(){/*...*/}();
var foo = function(){/*...*/}();
true && function () { /*...*/ }();
0, function () { /*...*/ }();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
void
声明了不需要返回值,第二个则将IIFE函数的返回值赋给了foo
。第三、第四个都是明确需要表达式的场景,所以解析器会认识这种写法。
对于IIFE函数,也可以给它们传入参数,例如:
(function foo(arg1,arg2,...){...}(param1,param2,...));
- 1
对于常见的(function($){...})(jQuery);
即是将实参jQuery传入函数function($){}
,通过形参$
接收。
上述函数中,最开始的那个括号,可能会由于js中自动分号插入机制而引发问题。例如:
a = b + c
;(function () {
// code
})();
- 1
- 2
- 3
- 4
如果没有第二行的分号,那么该处有可能被解析为c()
而开始执行。所以有的时候,可能会看到这样的写法:;(function foo(){/*...*/}())
,前边的分号可以认为是防御型分号。
2. 第二类是$(function(){});
$(function(){/*...*/});
是$(document).ready(function(){/*...*/})
的简写形式,是在DOM加载完成后执行的回调函数,并且只会执行一次。
$( document ).ready(function() {
console.log( "ready!" );
});
- 1
- 2
- 3
和
$(function() {
console.log( "ready!" );
});
- 1
- 2
- 3
起到的效果完全一样。
在一个页面中不同的js中写的$(function(){/*...*/});
函数,会根据js的排列顺序依次执行。
例如:
test.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<span>This page is shown to understand '$(document).ready()' in jQuery. <br /><span>
<p>
If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS...<br /><br />
</p>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="test1.js"></script>
<script src="test2.js"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
test1.js
$(function(){
$(document.body).append("$(document).ready()1 is now been executed!!!<br /><br />");
});
- 1
- 2
- 3
test2.js
$(function(){
$(document.body).append("$(document).ready()2 is now been executed!!!<br /><br />");
});
- 1
- 2
- 3
最后可以看到页面输出如下:
This page is shown to understand '$(document).ready()' in jQuery.
If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS... $(document).ready()1 is now been executed!!! $(document).ready()2 is now been executed!!!
原文: https://blog.csdn.net/stpice/article/details/80586444
最新文章
- google gtest window 平台应用
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
- Java反射机制探秘
- easyui tabs内容panel自适应窗体宽度方法
- javascript中的原型和闭包
- 标准I/O之实现细节
- checkbox在jquery版本1.9 以上用attr不可重复操作的问题【附解决方案】
- use 2 stacks to simulate a queue
- 安卓开发JAVA基础之初识JAVA
- ios可视化编程 UI高级 UI_13
- 【原创】Linux基础之redhat6升级glibc-2.12到2.14
- install MariaDB 10.2 on Ubuntu 18
- 免费开源的diff软件“meld”-替代beyond compare的神器
- SQL 问题记录
- shell 环境变量
- 洛谷:P1087 FBI树 P1030 求先序排列 P1305 新二叉树
- C++类间转换之dynamic_cast
- Java并发之synchronized使用
- nodejs笔记--Events篇(二)
- 剑指Offer - 九度1512 - 用两个栈实现队列
热门文章
- 编写Java程序_输入本部门五位员工的薪资,并根据用户输入的序号为指定员工进行提薪。若用户输入序号出现越界,则提示错误。
- Java初学者作业——定义一个计算器类, 实现计算器类中加、 减、 乘、 除的运算方法, 每个方法能够接收2个参数。
- 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序
- python + pytest + allure生成测试报告
- Echart可视化学习(四)
- PingFang(苹方)字体的引用
- 乒乓球队比赛,甲队有abc三人,乙队有xyz三人。 抽签得出比赛名单:a不和x比,c不和x,z比, 利用集合求出比赛名单
- python多环境管理一(venv与virtualenv)
- JAVA自定义连接池原理设计(一)
- 《剑指offer》面试题29. 顺时针打印矩阵