JavaScript基础（六） --- 函数、闭包

来源：互联网发布：怎么看端口号是什么编辑：程序博客网时间：2024/06/07 23:03

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)    }()

阅读全文

0 0