doubleyong
管理员
管理员
  • 最后登录2021-06-18
  • 发帖数1013
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:218回复:0

[javascript]你真的知道『立即执行函数』吗?

楼主#
更多 发布于:2021-06-02 11:21
立即执行函数,经常使用,但是你确定了解它嘛?

下面,就来看看吧!


 
1、定义

立即执行函数,又称IIFE.

Immediately Invoked Funcation Expression

   立即地        调用       (函数       表达式  )    


注:是函数表达式


2、定义函数的两种方式

1、 函数声明

// 函数声明 !== 函数表达式

function test(){
 console.log('Function declaration');
}

2、函数表达式

把一个(匿名)函数声明式赋值给一个变量的形式,称为函数表达式

var test2 = function(){
 console.log('Function Expression');
}

函数调用

    test();
    test2();

注:()对于函数名后面的括号,叫做执行符号



3、立即执行函数的使用

声明后,直接加(); 将会报语法错误,执行符号只能跟在函数表达式后面

示例:

function test(){
 console.log('Function declaration');
}()

报错:Uncaught SyntaxError: Unexpected token ')'

原因:立即执行函数 ,是执行函数表达式,而不是函数声明式



4、函数表达式

当一个函数需要立即执行的情况,该函数必须形成函数表达式的形式

以下,都是表达式:

1
(1)
+1
-1
!1
~1

所以,可以使用(),+,-,!,~ 等,将函数声明式变成函数表达式

如下:

var a = function (){
 console.log('Function Expression');
} ();
+function (){
 console.log('Function Expression');
} ();
~function (){
 console.log('Function Expression');
} ();
(function (){
 console.log('Function Expression');
}) ();


5、书写规范

w3c 官网推荐,立即执行函数的编写规范:


(function (){
 console.log('Function Expression');
}());


实践中,一般用下面的方式,因为代码看着比较清晰

(function (){
 console.log('Function Expression');
})();


6、为什么立即执行函数前要加逗号

;(function (){
 console.log('Function Expression');
})();

主要因为,程序员的编程习惯问题,很多程序员,在语句结束末尾不加分号

js中,加上分号才会判断它是个语句,平时我们没有加分号,js会自动为我们加上分号

如:console.log('hahha')

js 解析成 console.log('hahha');


而括号太多时,js不能正确识别,所以,就要我们自己加分号;

(function (){
 console.log('Function Expression');
}) ()
(function (){
 console.log('Function Expression');
}) ()

上面的代码会


报错:


 Uncaught TypeError: (intermediate value)(...) is not a function
    at <anonymous>:4:1



原因:js不能正确识别这么多括号

加上分号就正确了

(function (){
 console.log('Function Expression');
}) ();
(function (){
 console.log('Function Expression');
}) ();

为防止其它开发者未打分号,导致错误,所以可以在前面加上分号:

;(function (){
 console.log('Function Expression');
}) ();


7、立即执行函数有独立作用域

也可以传参, 也可以给函数取名:

;(function test(a,b,c,d){
    console.log(test);
    console.log(test.length);
}) (1,2,3);
test()

外部调用test();

 报错:
   VM97:1 Uncaught ReferenceError: test is not defined
    at <anonymous>:1:1



原因:立即执行函数的作用域是独立的。且函数名不能在外部使用


8、立即执行函数的好处

1、可以创建一个与外界没有任何关联的作用域,独立作用域

2、执行完成后,自动销毁

3、ES3 ES5 立场上是没有模块的模仿,可用立即执行函数来模拟模块化


今天的分享就到这,还有关于立即执行函数的其它问题,欢迎提问



苟有恒 , 何必三更眠五更起

关注我,一起学习吧

鼓励一下,赐个赞 和 在看


图片:vx.png

知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号