js中函数声明与函数表达式的区别以及立即执行函数

madthumb 发布于2019-08-23 10:26 / 2881人阅读

摘要：最近在写代码时遇到了闭包，其中闭包又和立即执行函数有点关系，于是牵扯除了函数声明以及函数表达式，我感觉中文的很多文章写的不太好，查阅了的指南和这篇关于的文章，觉得写的很好，整合一下。函数声明和函数表达式。

最近在写代码时遇到了闭包，其中闭包又和立即执行函数（immediately invoked function expression, aka IIFE)有点关系，于是牵扯除了函数声明以及函数表达式，我感觉中文的很多文章写的不太好，查阅了mdn的function指南和这篇关于IIFE的文章，觉得写的很好，整合一下。

Firstly, in JS there are two ways of defining functions: function declarations and function expressions, aka 函数声明和函数表达式。

function declaration (function definition or function statement)

This is always followed by the name of the function (which is very important cauz function declaration requires a name, if not, it may encounter some SyntaxError, we can see from the following examples), a list of parameters and the JavaScript statements that define the function, enclosed in curly braces{}.

function expression

This can be anonymous; it doesn"t have to have a name;

var ab = function(){}; //anonymous function expression
var ac = function ad() {};// function expression with a name

.
.
SyntaxError will happen in the following case when lack of a name:

var foo = function(){}; //this is a anonymous function expression we will see in the future
foo(); //we can invoke the function by adding parens after foo
// then some people might think of the following, since foo equals to function(){} and foo() can be used, why don"t we use function{}()?
function(){}(); // However, there will be a SyntaxError: "unexpected ("

1.1 What leads to this SyntaxError?
The reason is that the parser treats it as a function declaration without a name rather than a function expression.
Now that, what about we give it a name by using

function foo(){}();// there will also be a SyntaxError: "unexpected )"

1.2 What leads to the other SyntaxError?
This is because parens placed after the stataments are view as a grouping operator which needs to contain an expression;
OK, here I finally got the idea and there must be no error! Why don"t we use this:

function foo(){}(1); //no error

1.3 In this case, however, the function is not executed either despite there is no error. Here is the reason, the parser treated this as two separate unrelated expression

function foo(){}; 
(1);

.
.
Is there any way to solve the problem????
Yep! The solution is IIFE（立即执行函数）！！！！！！

(function(){})();
(function(){}());

Unlike in 1.1, the parser encounters function keyword and knows that now I need to treat it like function expression rather than a function declaration! Such parens indicate that the function expression will be immediately invoked and the variable will contain the result of the function.
也就是说，只要不让function这个关键词出现在行首就行，所以下面的情况都可以。

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

One application of IIFE -- Closure(闭包）

IIFE is used to lockin values and effectively save state.
The advantage is that since the function is invoked immediately without an identifier, a closure can be used without polluting the current scope.

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

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

Javascript 函数、作用域链与闭包

摘要：而外层的函数不能访问内层的变量或函数，这样的层层嵌套就形成了作用域链。闭包闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。闭包是js中一个极为NB的武器，但也不折不扣的成了初学者的难点。因为学好闭包就要学好作用域，正确理解作用域链，然而想做到这一点就要深入的理解函数，所以我们从函数说起。函数...

ssshooter 2019-08-23 11:47 评论0 收藏0
js立即执行函数: (function ( ){...})( ) 与 (function ( ){.

摘要：你需要明白的原理，我简单说一下这是定义，定义只是让解释器知道其存在，但是不会运行。这是语句，解释器遇到语句是会运行它的。在SF上看到这样一个问题，我觉得问得很好，所以弄成文章收集了。没有区别。你需要明白 IIFE 的原理，我简单说一下： function foo() {...} // 这是定义，Declaration；定义只是让解释器知道其存在，但是不会运行。 foo(...

xbynet 2019-08-21 10:41 评论0 收藏0
前端基础问题整理-JavaScript相关

摘要：请解释事件代理事件代理也称为事件委托，利用了事件冒泡。同源指的是协议域名端口相同，同源策略是一种安全协议。目的同源策略保证了用户的信息安全，浏览器打开多个站点时，互相之间不能利用获取对方站点的敏感信息。请解释事件代理(event delegation) 事件代理也称为事件委托，利用了事件冒泡。例如： item1 item2 item3 当页面li增多时单...

刘东 2019-08-21 14:03 评论0 收藏0
ES5和ES6作用域详解

摘要：允许在块级作用域内声明函数。上面代码中，存在全局变量，但是块级作用域内又声明了一个局部变量，导致后者绑定这个块级作用域，所以在声明变量前，对赋值会报错。 ES5的作用域变量起作用的范围，js中能创建作用域的只能是函数 { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); //...

Dr_Noooo 2019-08-21 17:30 评论0 收藏0
详解JavaScript函数模式

摘要：函数表达式又名匿名函数为变量赋的值是函数定义本身。在语言里任何匿名函数都是属于对象。这种情况下，就叫做回调函数。如上面代码示例展示了文档单击事件时以冒泡模式传递给回调函数的特别适用于事件驱动编程，因为回调模式支持程序以异步方式运行。 JavaScript设计模式的作用是提高代码的重用性，可读性，使代码更容易的维护和扩展在javascript中，函数是一类对象，这表示他可以作为参数传递...

wwolf 2019-08-21 10:20 评论0 收藏0