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(){});之间的区别的更多相关文章

  1. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

  2. JavaScript中this和$(this)之间的区别以及extend的使用

    jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbo ...

  3. js中callback.call()和callback()的区别

    js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello! ...

  4. JS中的== 、===的用法和区别。

    JS中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而  === 和 !== 只有在相同类型下,才会比较其值 ======= ...

  5. JS中三目运算符和if else的区别分析与示例

    本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家.   今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代 ...

  6. 网站开发进阶(二十)JS中window.alert()与alert()的区别

    JS中window.alert()与alert()的区别 前言 alert与window.alert没什么区别,如果有人觉得有区别,那就来解释一下:所有以window.开始的语句,都可以直接把wind ...

  7. [转] C#中out和ref之间的区别

    gskcc 的原文地址 C#中out和ref之间的区别 首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个 ...

  8. JS中==、===和Object.is()的区别

    JS中==.===和Object.is()的区别 首先,先粗略了解一下这三个玩意儿: ==:等同,比较运算符,两边值类型不同的时候,先进行类型转换,再比较: ===:恒等,严格比较运算符,不做类型转换 ...

  9. js中的函数function

    js的function对象在调用过程中具有一个arguments的属性,它是由脚本解释器创建的(这也是arguments创建的唯一方式). arguments属性能够看作是一个Array对象,它有le ...

  10. js中Object.__proto__===Function.prototype

    参考:http://stackoverflow.com/questions/650764/how-does-proto-differ-from-constructor-prototype http:/ ...

随机推荐

  1. 【C#】C#中使用GDAL3(三):Windows下编译插件驱动

    转载请注明原文地址:https://www.cnblogs.com/litou/p/15720236.html 本文为<C#中使用GDAL3>的第三篇,总目录地址:https://www. ...

  2. vim 个性化设置

    vim 编辑器安装 yum install vim vim个性化设置 vim ~/.vimrc 复制以下代码 关闭vim一致性原则 set nocompatible 显示行号 set number 设 ...

  3. Eclipse启动SpringCloud微服务集群的方法

    1.说明 下面这篇文章介绍了Eureka Server集群的启动方法, SpringCloud创建Eureka模块集群 是通过jar包启动时指定配置文件的方式实现的. 现在只有Eureka Serve ...

  4. 三角网格上的寻路算法Part.2—A*算法

    背景 继上一篇三角网格Dijkstra寻路算法之后,本篇将继续介绍一种更加智能,更具效率的寻路算法-A*算法,本文将首先介绍该算法的思想原理,再通过对比来说明二者之间的相同与不同之处,然后采用类似Di ...

  5. Linux架构中代理服务器配置与负载均衡

    本期内容概要 代理 负载均衡 内容详细 1.代理 1.主要作用: 将流量平均分配 2.代理的方式 01 正向代理 外部想要访问服务器 先找代理 找到之后还需要找服务器 应用:VPN 02 反向代理 外 ...

  6. 51 Nod 1183 编辑距离 (动态规划基础)

    原题链接:1183 编辑距离 题目分析:这个最少的操作次数,通常被称之为编辑距离."编辑距离"一次本身具有最短的意思在里面.因为题目有"最短"这样的关键词,首先 ...

  7. 网络协议学习笔记(二)物理层到MAC层,交换机和VLAN,ICMP与ping原理

    概述 之前网络学习笔记主要讲解了IP的诞生,或者说整个操作系统的诞生,一旦有了IP,就可以在网络的环境里和其他的机器展开沟通了.现在开始给大家讲解关于网络底层的相关知识. 从物理层到MAC层:如何在宿 ...

  8. Keil MDK STM32系列(四) 基于抽象外设库HAL的STM32F401开发

    Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...

  9. Java库中的LocalDate类

    Java库中的LocalDate类 类库设计者决定将保存时间与给时间点命名分开.所以标准Java类库分别包含了两个类:一个用来表示时间点的Date类:另一个是用来表示大家熟悉的日历表示法的LocalD ...

  10. Solon 开发,一、注入或手动获取配置

    Solon 开发 一.注入或手动获取配置 二.注入或手动获取Bean 三.构建一个Bean的三种方式 四.Bean 扫描的三种方式 五.切面与环绕拦截 六.提取Bean的函数进行定制开发 七.自定义注 ...