web学习 -- JavaScript匿名自执行函数(IIFE)

函数声明语句

以“function”开头的有名称的函数

function a();//函数声明语句

函数表达式语句

var a = function();//函数表达式语句

问题示例

var a = function(){
     }

var b = function(){
     }

console.log(a()+b());//输出结果是NaN

分析:
解释器会把前面的a()认为是一个语句块的结束,后面的‘+’一元运算符有把后面b()转换为数字这么一个功能,所以得到的结果是NaN。

在做自执行函数的时候,要把函数声明转化为函数表达式,避免影响输出结果

匿名自执行函数写法

写法一

(function(){
     

})();

写法二

(function(){
     

}() );

写法三

通过操作符:这种方法仍然会占用命名空间,所以不建议使用。

var a = function (){
     

console.log(2)

}()

写法四

通过操作符与或操作符

false || function (){
     

console.log(2)

}()
true && function (){
     

console.log(2)

}()
0 , function (){
     

console.log(2)

}()

注:通过操作符实现自执行函数一般使用在打包工具里面,比如webpack打包后会经常看到 ” 0,functtion(){}()“

写法五

一元运算符可以将函数声明转换为函数表达式,在bootstrap框架中常用

! function (){
     

console.log(2)

}()
-function (){
     

console.log(2)

}()
+function (){
     

console.log(2)

}()

方法六

new一个匿名函数,后面可省略括号

new function (){
     

	console.log(2)

};//在不传参的情况下使用new也可以自执行,可以去掉小括号,不常用。

优缺点

1.避免作用域命名污染

2.提升性能(减少了对作用域的查找)

3.避免全局命名冲突

  • 比如jq里面暴露给全局作用域$query两个变量,为了解决这个问题,我们可以将window.jq作为一个实参传递给一个立即执行的匿名函数。这样的话,我们再次命名$或者query就不会有冲突了。

4.有利于代码压缩(可以用简单字符串代替)

5.保存闭包状态

6.颠倒代码执行顺序

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

console.log(12)

function bb(){
     

        console.log(22)

}//打印顺序是22,12

//这就叫做UMD通用模块规范,在实际开发过程中被广泛应用。

7.模仿块级作用域
作用域的内部可以访问到外部,外部不可以访问到内部,js作用域的缺陷就是没有块级作用域。


            for (var i = 0; i <6; i++) {
     

            }

            console.log(i);//打印出来的是6,在for循环外面仍然可以访问到变量i。


		//三个特殊的语句可以欺骗语法分析:
        evel(); //内部存放js代码可被执行

        with(object instance)   {
                
        	//代码块  
        }// with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性。要给对象创建新的属性,必须明确地引用该对象。

        try {
        
        	// 此处是可能产生例外的语句   
        } catch(error) {
       
        	// 此处是负责例外处理的语句   
        } finally {
        
        	// 此处是出口语句   
        }

注:
所以在ES3下,严格来说js没有块级作用域的,但是以上三种方法可以实现块级作用域的效果。

常用的有try catch,把要声明的变量放在try里面,然后当一个错误抛出,让cath接住使用。
缺点:1.多个块级作用域需要多个嵌套;2.性能问题。

匿名自执行函数只能模拟块级作用域,并非真正的作用域。

let定义的作用域是块级作用域,但不要轻易使用,针对开发场景来选择。

你可能感兴趣的:(编程语言,#,JavaScript,前端,javascript,js)