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
js中(function(){}()),(function(){})(),$(function(){});之间的区别的更多相关文章
- 【前端】js中new和Object.create()的区别
js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...
- JavaScript中this和$(this)之间的区别以及extend的使用
jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbo ...
- js中callback.call()和callback()的区别
js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello! ...
- JS中的== 、===的用法和区别。
JS中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而 === 和 !== 只有在相同类型下,才会比较其值 ======= ...
- JS中三目运算符和if else的区别分析与示例
本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家. 今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代 ...
- 网站开发进阶(二十)JS中window.alert()与alert()的区别
JS中window.alert()与alert()的区别 前言 alert与window.alert没什么区别,如果有人觉得有区别,那就来解释一下:所有以window.开始的语句,都可以直接把wind ...
- [转] C#中out和ref之间的区别
gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...
- JS中==、===和Object.is()的区别
JS中==.===和Object.is()的区别 首先,先粗略了解一下这三个玩意儿: ==:等同,比较运算符,两边值类型不同的时候,先进行类型转换,再比较: ===:恒等,严格比较运算符,不做类型转换 ...
- js中的函数function
js的function对象在调用过程中具有一个arguments的属性,它是由脚本解释器创建的(这也是arguments创建的唯一方式). arguments属性能够看作是一个Array对象,它有le ...
- js中Object.__proto__===Function.prototype
参考:http://stackoverflow.com/questions/650764/how-does-proto-differ-from-constructor-prototype http:/ ...
随机推荐
- 【C#】C#中使用GDAL3(三):Windows下编译插件驱动
转载请注明原文地址:https://www.cnblogs.com/litou/p/15720236.html 本文为<C#中使用GDAL3>的第三篇,总目录地址:https://www. ...
- vim 个性化设置
vim 编辑器安装 yum install vim vim个性化设置 vim ~/.vimrc 复制以下代码 关闭vim一致性原则 set nocompatible 显示行号 set number 设 ...
- Eclipse启动SpringCloud微服务集群的方法
1.说明 下面这篇文章介绍了Eureka Server集群的启动方法, SpringCloud创建Eureka模块集群 是通过jar包启动时指定配置文件的方式实现的. 现在只有Eureka Serve ...
- 三角网格上的寻路算法Part.2—A*算法
背景 继上一篇三角网格Dijkstra寻路算法之后,本篇将继续介绍一种更加智能,更具效率的寻路算法-A*算法,本文将首先介绍该算法的思想原理,再通过对比来说明二者之间的相同与不同之处,然后采用类似Di ...
- Linux架构中代理服务器配置与负载均衡
本期内容概要 代理 负载均衡 内容详细 1.代理 1.主要作用: 将流量平均分配 2.代理的方式 01 正向代理 外部想要访问服务器 先找代理 找到之后还需要找服务器 应用:VPN 02 反向代理 外 ...
- 51 Nod 1183 编辑距离 (动态规划基础)
原题链接:1183 编辑距离 题目分析:这个最少的操作次数,通常被称之为编辑距离."编辑距离"一次本身具有最短的意思在里面.因为题目有"最短"这样的关键词,首先 ...
- 网络协议学习笔记(二)物理层到MAC层,交换机和VLAN,ICMP与ping原理
概述 之前网络学习笔记主要讲解了IP的诞生,或者说整个操作系统的诞生,一旦有了IP,就可以在网络的环境里和其他的机器展开沟通了.现在开始给大家讲解关于网络底层的相关知识. 从物理层到MAC层:如何在宿 ...
- Keil MDK STM32系列(四) 基于抽象外设库HAL的STM32F401开发
Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...
- Java库中的LocalDate类
Java库中的LocalDate类 类库设计者决定将保存时间与给时间点命名分开.所以标准Java类库分别包含了两个类:一个用来表示时间点的Date类:另一个是用来表示大家熟悉的日历表示法的LocalD ...
- Solon 开发,一、注入或手动获取配置
Solon 开发 一.注入或手动获取配置 二.注入或手动获取Bean 三.构建一个Bean的三种方式 四.Bean 扫描的三种方式 五.切面与环绕拦截 六.提取Bean的函数进行定制开发 七.自定义注 ...