JavaScript基础（六） --- 函数、闭包-优快云博客

本文链接：https://blog.youkuaiyun.com/csdnwyn314/article/details/74994742

1. 函数的参数

1）. 形参 – 函数在定义阶段，里面的参数属于形参

2）. 实参 – 函数的调用阶段，参数为实参

function fn(n){    // n - 形参
        alert(n)
    }
fn(10);   // 10 - 实参

3）. 当把函数表达式做为值传给另一个函数的参数的时候，就叫做回调函数

function fn(n){  
        n();
    }

function aa(){
        alert(456)
    }

fn(aa);   // aa - 回调函数

4）. 函数自带参数机制： arguments (arguments是一个类数组)

function add(){
        var total=0;
        for(var i=0; i<arguments.length; i++){
            if(!isNaN(arguments[i])){//过滤有效数字；
                total+=Number(arguments[i]);//防止字符串拼接
            }
        }
        return total;
    }
   console.log(add(1,2,'3','3px','aaa',7));

2. 函数封装的意义

对于相同的功能；只需要封装1次，以后需要的时候，直接调用即可；

3. 函数的分类

这里写图片描述

4. 闭包

函数被调用的时候形成一个私有作用域，保护里面的变量不受外界的干扰，函数的这种保护机制，叫做闭包；

例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
<script>
    //循环绑定事件：点击每个按钮弹出对应的索引；
    //自定义属性循环绑定事件；
    var aBtn=document.getElementsByTagName('input');
    for(var i=0; i<aBtn.length; i++){//闭包实现循环绑定事件
        //每个正确的i值，都被保存在闭包中的私有变量index上；
        (function(index){//形参：index
            aBtn[index].onclick=function(){
                alert(index);
            }
        })(i);//实参i;
    }
</script>
</body>
</html>

例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        li{
            width: 450px;
            height: 200px;
            font-size: 50px;
            margin:10px;
        }
        li input{
            width: 150px;
            float: left;
            height: 40px;
        }
        li input.on{
            background: lightblue;
        }
        li div{
            width: 100%;
            height: 100%;
            display: none;
            background: lightblue;
        }
        li div.show{
            display: block;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <input type="button" value="按钮1" class="on"/>
        <input type="button" value="按钮2"/>
        <input type="button" value="按钮3"/>

        <div class="show">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </li>
    <li style="width: 300px">
        <input type="button" value="按钮1" class="on"/>
        <input type="button" value="按钮2"/>

        <div class="show">内容1</div>
        <div>内容2</div>
    </li>
    <li>
        <input type="button" value="按钮1" class="on"/>
        <input type="button" value="按钮2"/>
        <input type="button" value="按钮3"/>

        <div class="show">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </li>
    <li style="width: 600px">
        <input type="button" value="按钮1" class="on"/>
        <input type="button" value="按钮2"/>
        <input type="button" value="按钮3"/>
        <input type="button" value="按钮4"/>

        <div class="show">内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </li>
</ul>
<script>
    var aLi=document.getElementsByTagName('li');
    for(var i=0; i<aLi.length; i++){
        tab(aLi[i]);
    }
    function tab(oBox){
        var aBtn=oBox.getElementsByTagName('input');
        var aDiv=oBox.getElementsByTagName('div');
        for(var i=0; i<aBtn.length; i++){
            (function (index){//每一个形参都是私有变量；
                aBtn[index].onclick=function(){
                    for(var i=0; i<aBtn.length; i++){
                        aBtn[i].className='';
                        aDiv[i].className='';
                    }
                    this.className='on';
                    aDiv[index].className='show';
                }
            })(i)
        }
    }

</script>
</body>
</html>

5. 自执行函数

特点：自己调用自己

   (function (){
        alert(123)
    })();
   ~function(){
        alert(456)
    }()
   +function(){
        alert(789)
    }()
    -function(){
        alert(147)
    }()
    !function(){
        alert(258)
    }()