ECMAScript-7 【立即执行函数-闭包深入-逗号运算符】

 

一.立即执行函数

(1).定义

//常用方式
(function(){
})();
//w3c建议
(function(){
}())

立即执行函数中写函数名没有用，访问会报错因为执行完就销毁了

(2).立即执行函数传参

(function(a,b){
    console.log(a+b);
}(2,4));

(3).接收参数

var num=(function(a,b){
    return a+b;
}(2,4));

这样就可以接收立即执行函数的返回值了

(4).函数表达式()

凡是括号包起来的都叫表达式

表达式自动忽略函数名

function test(){
    
}();//不能执行，一定得是表达式才能被执行符号执行
var test = function(){
    console.log(1);
}();//这个函数可以执行，因为这是表达式

在函数声明前加上 +-*/ &&符号也一样可以执行因为变成了表达式了

- function test(){
    console.log(1);
}();//正常执行，因为函数声明变成表达式了

这么写不报错，因为js引擎把(6)解析为一个表达式，但是如果里面没参数就报错了其中test()不执行

function test(a){
    console.log(1);
}(6)

var a=10;
if(function b(){}){
    a+=typeof(b);
}
console.log(a);//输出10undefined

console.log(Boolean(function(){}))==true所以进循环

(function b(){})后就变成了表达式

表达式自动忽略函数名

typeof出来的是字符串所以可以输出

二.闭包深入

function test(){
    var arr=[];
    for(var i=0;i<10;i++){
        arr[i]=function(){
            document.write(i+'');
        }
    }
    return arr;
}
var myArr=test();
for(var j=0;j<10;j++){
    myArr[j]();
}

为什么会打印出10个10

首先创建DO,将创建myArr变量，然后定义test()函数声明，将声明体赋值，接下来执行test()函数，将创建test函数的AO其中创建 arr变量，然后执行执行函数体，for循环10次，在这个过程中不断的将函数体赋值，此时已经定义了10个方法体的AO,但是没有执行。此时循环结束i已经变成了10.return结束test()函数且test的AO被销毁。返回了那10个含有testAO的函数。接下来for循环返回的arr，此时也就相当于执行了那10个函数体，所以此时那10个函数体不仅有自己的AO也有了test()函数的AO 循环10次执行方法体输出i 而i在自身的AO中没有，所以调用test()函数的AO所以输出10个10。也就是说这个例子是形成了一个闭包。

如果要执行0-9：

方法1：

立即执行函数用在test()的函数中的方法体

for(
    (function(){
        document.write((i+1)+'')
    }())
)

方法2：

在test()的函数中的方法体中加入形参Num输出num不用i

for(var i=0;i<10;i++){
    arr[i]=function(num){
        document.write((nume+1)+'');
    }
}

方法3：

使用立即执行函数并赋参

(function(j){
    arr[j]=function(){
       document.write(j+'');     
    }
}(i))

每一次循环，立即执行函数中就会形成一个当前的AO被匿名函数挂载 最后循环输出的也是10个不同的立即执行函数AO,而不用立即执行函数则是只有一个AO所以会重复输出同一个AO的值

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var oLi=document.querySelectorAll('li');
    for(var i=0;i<oLi.length;i++){
        oLi[i].onClick=function(){
            document.write(i);
        }
    }
</script>//这样输出的是5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var oLi=document.querySelectorAll('li');
    for(var i=0;i<oLi.length;i++){
        oLi[i].onClick=(function(){
            document.write(i);
        })();
    }
</script>//这样才会点击那个输出下标

三.逗号运算符

console.log(6,5)//返回5最后一个值

var num=(2-1,6+5,24+1);//返回25

var fn=(
    function test1(){
        return 1;
    },
    function test2(){
        return '2';
    }
)();
console.log(typeof(fn));//返回string