在线客服与您一对一交流
当前位置: 主页 > 行业新闻 > IT技术 >

!function foo()、(function(){}())与(function(){})()

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()/.../);是(function()/.../);是(document).ready(function(){/…/})的简写形式,是在DOM加载完成后执行的回调函数,并且只会执行一次。

$( document ).ready(function() {

   console.log( "ready!" );

});   

$(function() {

   console.log( "ready!" );

});

起到的效果完全一样。

在一个页面中不同的js中写的$(function(){/…/});函数,会根据js的排列顺序依次执行。

相关文章:

  • Viewport viewport:可视窗口,也就是浏览器。 vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则,但是也提供更智能的功能:...

  • 浏览器缓存有时挺大的,修改网站后半天看不到效果,今天西安蟠龙小编总结几种清缓存看网站修改效果的方法 清缓存方法: 一、ctrl+f5 多刷新几次 二、用浏览器的无痕模式或者隐私模式 三...

  • window.location.origin(?前边的URL) 如果有端口号,含端口号 结果如下: http://www.it2168.com:8080 window.location.origin兼容问题 if (!window.location.origin) { window.location.origin = window.location.protocol + // + window.l...

  • matchHeight使所有选定元素的高度完全相等。 尽管这曾经是一个棘手的问题,但如今建议在可能的地方使用CSS Flexbox和CSS Grid,尽管该库对于旧版浏览器仍然有用。 特征 自动匹配元素组的高度 使...

  • 收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家。 ******************************************************************************* 一、国外插件 ace 版本:1.2.3au 官网:https://github.com/ajaxorg/ace-bu...

  • 懒加载插件 new AnimOnScroll(document.getElementById(grid), { minDuration: 0.4, maxDuration: 0.7, viewportFactor: 0.2 }); /*AnimOnScroll.js*/ /** * animOnScroll.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.op...

  • 为什么要用classie.js classie是一个 awesome,lightweight script。 用来添加,移除,toggleDom元素的类。那为什么不用jquery呢, 因为jquery相对于这几个简单的功能太冗余了(just too bloated for your needs)。 clas...

  • breakpoints.js 版本:0.4.2 官网:https://github.com/amazingSurge/breakpoints.js/ 许可:GPL 依赖:jQuerys DataAPI:无 功能:用于响应式布局设置断点 Breakpoints();...

  • 用来兼容jquery1.7 版本, jquery版本之间有一些方法可能不同或废弃,会有报错, 可以引入一个 jquery-migrate.min.js 来兼容。 比如1.9版本对于 live(),die(),toggle(),sub(),$.browser 等等都已经不支持了...

  • 1.breakpoints.js是什么? breakpoints.js是一个jQuery插件。定义响应性设计的断点,Breakpoints.js 将在浏览器进入和/或者退出断点时消除自定义事件。 breakpoints下载文件夹中readme.txt文件中有这么一句话...

  • 公司:西安蟠龙网络科技有限公司
  • 联系人:张经理
  • 手机/微信:187 2951 9978
  • Q Q: 136 8888 63 点击这里给我发消息
  • 地址:西安市雁塔区唐延南路11号逸翠园i都会
  • CSS3 使用 calc() 计算宽度高度vw vh px

    Viewport viewport:可视窗口,也就是浏览器。 vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则,但是也提供更智能的功能:...

  • !function foo()、(function(){}())与(function(){})()

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

  • 浏览器清缓存方法

    浏览器缓存有时挺大的,修改网站后半天看不到效果,今天西安蟠龙小编总结几种清缓存看网站修改效果的方法 清缓存方法: 一、ctrl+f5 多刷新几次 二、用浏览器的无痕模式或者隐私模式 三...

  • Javascript中window.location.origin是什么

    window.location.origin(?前边的URL) 如果有端口号,含端口号 结果如下: http://www.it2168.com:8080 window.location.origin兼容问题 if (!window.location.origin) { window.location.origin = window.location.protocol + // + window.l...

  • matchHeight使所有选定元素的高度完全相等 jQuery响应式匹配高度组件

    matchHeight使所有选定元素的高度完全相等。 尽管这曾经是一个棘手的问题,但如今建议在可能的地方使用CSS Flexbox和CSS Grid,尽管该库对于旧版浏览器仍然有用。 特征 自动匹配元素组的高度 使...

  • 收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家。 ******************************************************************************* 一、国外插件 ace 版本:1.2.3au 官网:https://github.com/ajaxorg/ace-bu...