【JavaScript】（4）普通函数、动态函数定义格式，调用方式，注意的详细细节

来源：互联网发布：中电41所知乎编辑：程序博客网时间：2024/06/06 11:42
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>JavaScript语言基础--函数function\Function</title>    </head>    <body>    <pre>        ▉js函数普通定义格式：▉        function 函数名(参数列表){            执行语句;            [return 返回值;]        }    </pre>    <script type="text/javascript">        //js函数没有返回值类型，形参也没有类型        function hello(){            alert("hello function....");        }        //hello();        function sum(a,b){            return a+b;        }        function fun(){            var x=sum(100,200);            alert(x);        }        //fun();    </script>    <!-- 调用已经加载好的js中的函数 -->    <input type="button"  onclick="hello();" value="函数1"/>      <input type="button"  onclick="fun();" value="函数2" />       <h3>以下演示函数的若干细节</h3>    <input type="button"  onclick="demo( )" value="有关函数名及内存模型的细节"><br/>    <input type="button"  onclick="demo2( )" value="有关函数书写位置的细节"><br/>    <input type="button"  onclick="demo3( )" value="有关函数参数的细节"><br/>    <script type="text/javascript">        //❶、有关函数名及内存模型的细节        function getSum(){            return 10;        }        function demo(){            var x=getSum();//结果：10 【注意  】：获得的是函数的返回值            alert(" x=getSum(); x= "+x);            var y=getSum;/*【注意】：函数其实是一个Function对象，函数名即使对象名，                                                        本句相当于引用赋值---y和getSum指向同一个Function对象*/            alert( y );//结果：相当于调用：y.toString( ); 输出函数的特征字符串---函数的定义代码            alert( y( ) );//结果：输出10---调用引用y所指向的那个Function对象对应的函数代码        }    </script>    <script type="text/javascript">        //❷、有关函数书写位置的细节        function demo2(){            show(1,3);        }        /*【注意①】：        ☆WA:不能执行，因为浏览器在解析当前<script>标记时，还没有加载下一个<script>，因此不认识这个show(a,b)这个函数        ☆如果在上面的按钮“有关函数书写位置的细节”的单击事件中调用dmeo2( ),则可以，因为事件发生时，浏览器已经把整个页面解析完成（页面显示完）        ☆综上：为了我们写的所有js函数被页面都能认识，通常把这些js代码都写在<head>中，然后再页面元素事件调用，此时<head>部分早已解析完了*/        //demo2();    </script>       <script type="text/javascript">        function show(a,b){//这里的a,b是用来识别函数用的，而且让js帮忙把前两个实参装配到这两个变量，以便使用            alert(a+"，"+b);            //【注意②】：有关函数参数细节的说明：js内部是用一个名为arguments的数组去接收实参的            alert("arguments.length："+arguments.length);            for(var i=0;i<arguments.length;i++){                document.write(arguments[i]+"&nbsp;&nbsp;");//打印出show函数的参数            }        }    </script>       <script type="text/javascript">        //❸有关函数参数的细节：js中的函数不存在重载，参数根据调用时的实参进行自动装配---给了就赋值，没给就undefined，多给了没接住        //js中参数跟函数的识别没有关系，只以函数名识别，而且函数名实际上是引用变量，和函数名捆绑的引用变量指向的是同一个函数        function demo3(){            //show(2, 3);            //show("hello","hhh");            //show(1);//结果：1,undefined            show(123,"abc",true,[10010,10101,10101]);        }    </script>    <pre>        ▉js动态函数的定义格式： ▉        var 函数名=new Function( 形参列表,函数体描述 );//形参列表和实参列表都以字符串格形式给出    </pre>    <script type="text/javascript">    /*用动态函数描述此普通函数    function add(a,b){        var s=0;        s=a+b;        return s;    }    */    </script>    <script type="text/javascript">        //【注意】：动态函数简单实用方式1：        var add=new Function("a,b","var s=0; s=a+b; return s;");//参数列表合用一个参数列表        var add=new Function("a","b","var s=0; s=a+b; return s;");//参数列表分开写        //alert("add( 2,3 )= "+add(2,3));    </script>    <!-- 【注意】：动态函数深入实用方式2： -->    <h3>动态函数的解耦用法演示---类似于Java中的 </h3>    参数列表：<input type="text" name="param">函数体描述：<input type="text" name="desc"> <input type="button" value="执行函数" onclick="bb();">    <script type="text/javascript">        function bb(){            /*此处一定要小心，value后边没有“ ( ) ” 没发现，坑了好久            var param=document.getElementsByName("param")[0].value();*/            var param=document.getElementsByName("param")[0].value;            var desc=document.getElementsByName("desc")[0].value;            var f=new Function(param,desc);            alert( f(2 ,3) );        }    </script>    </body></html>
0 0