您的位置:首页 > Web前端

js 之IIFE 立即执行函数表达式

2017-11-24 13:57 281 查看
http://www.jb51.net/article/75089.htm
https://www.cnblogs.com/lodingzone/p/5341143.html
1、IIFE的全称是Immediately-invoked Function Expression,立即执行函数表达式

2、传统方式比较麻烦,定义和调用是分开的;传统的方法还会直接污染全局命名空间(浏览器里的 global 对象,如 window)

function foo() {...}     // 这是定义,Declaration;定义只是让解释器知道其存在,但是不会运行。
foo();                   // 这是语句,Statement;解释器遇到语句是会运行它的。


3、常用的两种 IIEF 的写法(本质没有区别):

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


4、那有些人问为啥这样不行  :function foo(...){}();

当然是不能,但是为什么呢?因为 function foo(...){} 这个部分只是一个声明,对于解释器来说,就好像你写了一个字符串 "function foo(...){}",它需要使用解析函数,比如 eval() 

执行它才可以。所以把 () 直接放在声明后面是不会执行,这是错误的语法。

如何把它变得正确?说起来也简单,只要把 声明 变成 表达式(Expression) 就可以了。实际上转变表达式的办法还是很多的,最常见的办法是把函数声明用一对 () 包裹起来,于是就变成了:

(function foo() {...})    // 这里是故意换行,实际上可以和下面的括号连起来
();
等价于:
var foo = function () {...}; // 这就不是定义,而是表达式了。
foo();

5、立即执行函数表达式的几种写法:

(function(){alert(1);}()); //括号形式
(function(){alert(1);})(); //括号形式
!function(){alert(1);}(); //运算符形式
+function(){alert(1);}(); //运算符形式
void function(){alert(2);}(); //void等价与运算符形式

6、立即执行函数表达式的传参:

(function(who, when) {
console.log("I met " + who + " on " + when);
} ("Joe Black", new Date()));

// 如果想在域里使用jQuery 还可以这样传参
(function($,who, when) {
console.log("I met " + who + " on " + when);
} (jQuery, "Joe Black", new Date()));
注意:

1、立即函数内部是可以访问外部变量的,所以很多情况下,我们并不需要传参数。如:jQuery的window实参,如果不传入。内部也是可以直接使用的。
2、通常你不应该给立即执行函数传递太多的函数,因为它很快会成为一个负担——为了理解代码是如何工作的,你不得不经常上下滚动源代码。

7、立即执行函数表达式的返回值(或表达式):

var result = (function () {
return 2 + 2;
}());

8、立即执行函数表达式的优点:

1、立即执行函数模式被广泛使用,它可以帮你封装大量的工作而不会在背后遗留任何全局变量。
2、定义的所有变量都会成员立即执行函数的局部变量,所以你不用担心这些临时变量会污染全局空间。
3、这种模式经常被使用在书签工具(bookmarklets)中,因为书签工具在任何页面上运行并且保持全局命名空间干净是非常必要的;
4、这种模式也可以让你将独立的功能封装在自包含模块中。
5、可以将这些代码封装进一个立即执行函数中,并且确保页面没有它的情况下也能正常工作。
6、可以添加更多的加强模块,移除它们,单独测试它们,允许用户去禁用它们等等。

9、注意点:

立即执行函数通常作为一个单独模块使用。一般没有问题,但是,建议在自己写的立即执行函数前加分号,这样可以有效地与前面代码进行隔离。否则,可能出现意想不到的错误。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: