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

最新推荐文章于 2024-01-03 11:05:23 发布

YI_DIAN_DIAN

最新推荐文章于 2024-01-03 11:05:23 发布

阅读量1.5k

点赞数

分类专栏： ❸JavaEE ---- ----③JavaScript 文章标签： javascript 函数

本文链接：https://blog.csdn.net/qq_35415600/article/details/71023141

版权

❸JavaEE 同时被 2 个专栏收录

46 篇文章 3 订阅

订阅专栏

---- ----③JavaScript

8 篇文章 0 订阅

订阅专栏

<!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>

YI_DIAN_DIAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】（4）普通函数、动态函数定义格式，调用方式，注意的详细细节

<!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">
复制链接

扫一扫