js中的立即执行函数

zhunjiee 发布于2019-08-21 10:55 / 2723人阅读

摘要：匿名函数的好处在于可以减少局部变量，以免污染现有的运行环境。另外通过，这三个符号运行的匿名函数比运行的匿名函数可以减少一个字符的使用但是我们通常使用加因为其他的操作符可能会带来其他的影响更多可以参考

js中的立即执行函数

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法

问题:

为什么会出现上面的两种不一样的写法,上面的写法难道不是简单的就是一个括号包裹匿名函数对象,再在后面加个括号调用函数，最后达到函数定义后立即执行的目的????然而并不是我想的那么简单

除了这两种常用的方式:
(function(){ //do something here;  })();
( function (){//do something here; }}());

还有一种方式为：
!function(){  // do something  }();

在这里开头要加上！或者 ~ , - 和 +。（都是英文符号）
为什么这里要这样子,为什么要在前面加上（）、！、+、-、=等运算符????

因为 JavaScript 文法明确规定表达式语句不得以 function 或者 { 
为开头（http://es5.github.io/#x12.4）

ExpressionStatement → [lookahead ∉ {{, function}] Expression;

好的现在带来更多的困惑了......

首先想要明白这个问题需要弄清函数表达式（function expression）和函数声明（function declaration）的区别：

函数表达式：

函数表达式中的函数可以为匿名函数，也可以有函数名，但是该函数实际上不能直接使用，只能通过表达式左边的变量 a 来调用。

var a = function(){
alert("Function expression");
};
var b = new a();

函数声明：

// 函数声明时必须有函数名

function a(){
alert("Function declaration");
}
a();

下面来看一下这段代码：

~function() { 
console.log("hi"); 
} ();

实际上可以分为两个部分（~function() { console.log("hi")} 和()部分）前面部分的匿名函数通过一元操作符变成了函数表达式，因而可以通过在表达式的后面使用（）来执行。

因此，执行匿名函数可以通过+，-，！，（）这里的括号也是一种运算符,称为分组运算符
这样的形式来转化为函数表达式，就可以通过表达式的后面使用（）来执行

一些其他的写法:

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

下面看一个组错误的的现象:

function (){console.log("hi")}();
VM354:1 Uncaught SyntaxError: Unexpected token )

function g(){ console.log("hi")}();
VM519:1 Uncaught SyntaxError: Unexpected token )

(1) function (){ }()

期望是立即调用一个匿名函数表达式，结果是进行了函数声明，函数声明必须要有标识符做为函数名称,而这里用()来做为标识符是非法的.

(2) function g(){ }()

期望是立即调用一个具名函数表达式，结果是声明了函数 g。末尾的括号作为分组运算符，必须要提供表达式做为参数。

function g(){ console.log("hi")}(1);
>1

所以那些匿名函数附近使用括号或一些一元运算符的惯用法，就是来引导解析器，指明运算符附近是一个表达式。

匿名函数的好处在于：可以减少局部变量，以免污染现有的运行环境。jQuery等库都用到了这样的原理。
另外：通过+，-！这三个符号运行的匿名函数比（）运行的匿名函数可以减少一个字符的使用,但是我们通常使用加(),因为其他的操作符可能会带来其他的影响

更多可以参考
ECMA-262-3 in detail. Chapter 5. Functions.

云服务器 GPU云服务器执行js函数怎么执行js函数 js函数最后执行 js匿名函数自执行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86416.html

JS进阶篇2---函数防抖（debounce）

摘要：函数防抖的要点，是需要一个来辅助实现，延迟运行需要执行的代码。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。而非立即执行版指的是触发事件后函数会立即执行，然后秒内不触发事件才能继续执行函数的效果。。 JS中的函数防抖一、什么是函数防抖概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重...

zhongmeizhi 2019-08-23 18:19 评论0 收藏0
JS之模仿块级作用域_立即执行函数

摘要：模仿块级作用域立即执行函数前言最近在细读高级程序设计，对于我而言，中文版，书中很多地方一笔带过，所以用自己所理解的，尝试细致解读下。语法如下这里是块级作用域以上代码定义并立即调用了一个匿名函数。模仿块级作用域-立即执行函数前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方一笔带过，所以用自己所理解的，尝试细致解读下。如有纰漏或错误，会非常感谢您的指...

NoraXie 2019-08-23 12:37 评论0 收藏0
模块化、闭包与立即执行函数的使用、MVC里的V和C

摘要：模块化里的和闭包与立即执行函数的使用这篇文章记录我写在线个人简历过程中学习的知识完整代码暂未完成预览地址轮播组件的使用英文官网中文网使用方法模块化学习写代码的方法抄运行修改模块化把对应功能放到块里面这个块可以是文件或者或者别的等等立即执模块化、MVC里的V和C、闭包与立即执行函数的使用这篇文章记录我写在线个人简历过程中学习的知识完整代码(暂未完成)预览地址轮播Swiper组件的使...

2501207950 2019-08-23 10:57 评论0 收藏0
进击的 JavaScript（五）之立即执行函数与闭包

摘要：匿名函数是不能单独写的，所以就提不上立即执行了。六立即执行函数在闭包中的应用立即执行函数能配合闭包保存状态。来看下上节内容中闭包的例子现在，我们来利用立即执行函数来简化它第一个匿名函数执行完毕后，返回了第二个匿名函数。前面的闭包中，提到与闭包相似的立即执行函数，感觉两者还是比较容易弄混吧，严格来说（因为犀牛书和高程对闭包的定义不同），立即执行函数并不属于闭包，它不满足闭包的三个条件。...

vincent_xyb 2019-08-22 18:44 评论0 收藏0
前端校招准备系列--js中的setTimeout到底是什么？

摘要：浏览器是多进程的，而浏览器的内核渲染进程是多线程的。如果已经将回调函数放进任务队列，但是主线程正在执行一个非常耗时的任务，当这个任务执行完毕后，主线程去任务队列中取任务，这个时候，就会出现连续执行的情况，也就是说相当于失效了。前言在刷笔试题的时候，经常会碰到setTimeout的问题，只知道这个是设置定时器；但是考察的重点一般是在一个方法中包含了定时器，定时器中的打印和方法中打...

Godtoy 2019-08-23 13:41 评论0 收藏0