js中(function(){}()),(function(){})(),$(function(){});之间的区别

2023-11-07

1. (function(){}())与(function(){})()

这两种写法,都是一种立即执行函数的写法,即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。

通常的函数声明和调用分开的写法如下:

function foo() {/*...*/}     // 这是定义,Declaration;定义只是让解释器知道其存在,但是不会运行。

foo();                   // 这是语句,Statement;解释器遇到语句是会运行它的。

普通的函数声明function foo(){}是不会执行的。这里如果直接这样写function foo(){}()解释器会报错的,因为是错误的语法。
IIFE函数的调用方式通常是将函数表达式、它的调用操作符、分组操作符放到一个括号内,来告诉解释器这里有一个需要立即执行的函数。否则通常情况下,解析器遇到一个function关键字,都会把它当做是一个函数声明,而不是函数表达式。
如下几种写法都是可以的:

(function foo(){/*...*/}());

(function foo(){/*...*/})();

!function foo() {/*...*/}();

+function foo() {/*...*/}();

-function foo() {/*...*/}();

~function foo() {/*...*/}();

在需要表达式的场景下,就不需要用括号括起来了:

void function(){/*...*/}();

var foo = function(){/*...*/}(); 

true && function () { /*...*/ }();

0, function () { /*...*/ }();

void声明了不需要返回值,第二个则将IIFE函数的返回值赋给了foo。第三、第四个都是明确需要表达式的场景,所以解析器会认识这种写法。

对于IIFE函数,也可以给它们传入参数,例如:

(function foo(arg1,arg2,...){...}(param1,param2,...));

对于常见的(function($){...})(jQuery);即是将实参jQuery传入函数function($){},通过形参$接收。
上述函数中,最开始的那个括号,可能会由于js中自动分号插入机制而引发问题。例如:

a  =  b  +  c 
;(function  () { 
  // code 
})();

如果没有第二行的分号,那么该处有可能被解析为c()而开始执行。所以有的时候,可能会看到这样的写法:;(function foo(){/*...*/}()),前边的分号可以认为是防御型分号。

2. 第二类是$(function(){});

$(function(){/*...*/});$(document).ready(function(){/*...*/})的简写形式,是在DOM加载完成后执行的回调函数,并且只会执行一次。

$( document ).ready(function() {
   console.log( "ready!" );
});   

$(function() {
   console.log( "ready!" );
});

起到的效果完全一样。

在一个页面中不同的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>

test1.js

$(function(){
    $(document.body).append("$(document).ready()1 is now been executed!!!<br /><br />"); 
});

test2.js

$(function(){
    $(document.body).append("$(document).ready()2 is now been executed!!!<br /><br />"); 
});

最后可以看到页面输出如下:

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!!!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js中(function(){}()),(function(){})(),$(function(){});之间的区别 的相关文章

随机推荐

  • C++ Thread

    Thread 线程库 线程的创建 detach 句柄独立 线程资源转移 sleep for 全局函数线程化 joinable hardware concurrency 线程的互斥 原子操作定义 互斥锁 try lock recursive
  • Spring bean的生命周期

    对于普通的Java对象 当new的时候创建对象 当它没有任何引用的时候被垃圾回收机制回收 而由Spring IoC容器托管的对象 它们的生命周期完全由容器控制 bean的声明 bean的声明有好几种 如上图 上图声明的一些bean信息可以通
  • Hello Vulkan(五)

    上一期技术分享中 我们讲述了如何关于Vulkan的Data Buffers使用及VMA内存管理器使用 自己创建或使用VMA在显存里创建Buffers 并在CPU进行读取或写入 本期将继续分享关于Vulkan的技术 内容是非常有趣的部分 即
  • 算法:两个数组取中位数

    要求 任意两个数组取中位数 在保证空间复杂度的同时 时间复杂度要求log m n package com flash hance import java util ArrayList import java util List author
  • 计算机网络-概述

    计算机网络概述 概念 计算机网络就是互连的 自治的计算机集合 1 计算机网络概述 数据通信 资源共享 分布式处理 提高可靠性 负载均衡 2 计算机网络组成 硬件 软件 协议 1 按照工作方式分类 边缘部分 核心部分 边缘部分用户可以直接使用
  • USB HID 协议入门

    USB HID设备类的应用场合 USB HID类是USB设备的一个标准设备类 包括的设备非常多 HID类设备定义它属于人机交互操作的设备 用于控制计算机操作的一些方面 如USB鼠标 USB键盘 USB游戏操纵杆等 但HID设备类不一定要有人
  • 循环依赖-Autowired方式

    Autowired方式 例子 Component public class TestA Autowired private TestB testB Component public class TestB Autowired private
  • 乐高 斜面砖_使用LEGOⓇMicrogame创建您的第一个游戏,一砖一瓦

    乐高 斜面砖 New users can start creating in Unity faster than ever with the LEGO Microgame currently in beta our most recent
  • 计算机主机 滴滴响,电脑滴滴滴的响而且开不了机怎么办【解决方法】

    在平常生活中使用电脑的过程中 我们经常会遇到各种问题 比如开不了机就是很常见的 但是对于台式机来说 如果是硬件问题导致的开机故障的话 机箱是会进行一个声音的反馈并报警的 这就是我们非常熟悉的滴滴声 而且滴滴声音有不同的规律 这会反映出不同的
  • 如何用Python从数据库里面获取数据?4个步骤就能轻松实现

    数据存放在MySQL里面 在数据库里面查询发现有个字段的数据是JSON格式 不方便进行后续的操作 比方说 统计分析 特征提取等 所以想把这个字段里面的JSON格式数据进行解析 解析成功后 然后把以结构化表的形式存放到MySQL数据库 解决方
  • 软件架构的10个常见模式 #CSDN博文精选# #IT技术# #软件模式# #架构模式#

    大家好 小C将继续与你们见面 带来精选的CSDN博文 又到周一啦 上周的系统化学习专栏已经结束 我们总共一起学习了20篇文章 这周将开启全新专栏 放假不停学 全栈工程师养成记 在这里 你将收获 将系统化学习理论运用于实践 系统学习IT技术
  • 二 log4qt介绍与用法

    qt 程序中 有简单的调试信息 又有重要的日志信息 如何把qDebug qWarning 等调试信息输出到文件 又如何即输出在终端又同时输出在文件呢 log4qt给你灵活自由配置 完整代码在下面 log4qt封装 1 简单日志系统qInst
  • 文件管理服务器搭建教程,文件服务器搭建教程

    文件服务器搭建教程 内容精选 换一换 本教程旨在演示使用GDS Gauss Data Service 工具将远端服务器上的数据导入GaussDB for openGauss 中的办法 帮助您学习如何通过GDS进行数据导入的方法 在本教程中
  • Unity开发日记-进入游戏按钮和退出游戏按钮的逻辑实现

    文章目录 前言 方法一 Button调用事件 方法二 直接使用监听函数调用 总结 前言 本篇文章只是总结一下UGUI中进入游戏和退出游戏的逻辑代码的两种实现方式 方便以后查阅 以后如果有其他的方法也会随时更新 Unity版本为2021 方法
  • vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决(亲测有效)。

    vue工程中element ui的tab组件使用ecahrts渲染界面大小异常 一般就是高度或者宽度不正常 主要原因还是echarts渲染时候 DOM还没渲染好 解决思路 1 获取包装所有tab页面的DIV的宽度和高度 因为这个再tab切换
  • window入侵排查

    第1篇 window入侵排查 常见的应急响应事件分类 web入侵 网页挂马 主页篡改 Webshell 后台弱口令 系统入侵 病毒木马 勒索软件 远控后门 系统命令执行 反序列化漏洞 网络攻击 DDOS攻击 DNS劫持 ARP欺骗 针对常见
  • vue 修改logo实现展示自定义的logo

    vue 修改logo实现展示自定义的logo 在vue element template 二次开发的时候 肯定是要把默认的logo给换成自己的logo让这个项目看上去就是自己的 一次开发 开干 首先 找到这个文件夹的位置 打开index h
  • RFID图书馆智能管理系统

    RFID图书馆智能管理系统 利用RFID技术 将门禁 图书标签 自助借还书机 移动盘点平台以及馆员工作站系统软件融合为一体 实现了便捷的图书管理系统 是专门为图书馆量身定做的智能管理系统 结合目前图书馆的现状 充分应用RFID技术 从图书盘
  • robustfith函数-最小二乘估计-M估计-Robust regression

    robustfit Robust regression 稳健回归 语法 b robustfit X y b robustfit X y wfun tune b robustfit X y wfun tune const b stats ro
  • js中(function(){}()),(function(){})(),$(function(){});之间的区别

    1 function 与 function 这两种写法 都是一种立即执行函数的写法 即IIFE Immediately Invoked Function Expression 这种函数在函数定义的地方就直接执行了 通常的函数声明和调用分开的