JavaScript函数调用经典实例代码

更新时间：2021年12月12日 14:31:04 作者：小高今天早睡了吗？

JavaScript提供了4种函数调用,一般形式的函数调用、作为对象的方法调用、使用 call 和 apply 动态调用、使用 new 间接调用,下面这篇文章主要给大家介绍了关于JavaScript函数调用的相关资料,需要的朋友可以参考下

JavaScript函数调用经典例题

1.输入框判断是不是闰年

2.随机数判断是不是闰年

3.输入框判断是不是质数

4.随机数判断是不是质数

5.封装函数，判断日期是否合法

思考：首先我们采用函数调用的方法，将需要调用的函数都写在 js 文件夹里面，调用的时候会更方便。需要注意的是不要忘记在html中引入js.

html代码：

<body>
    <span>是否为闰年</span>
    <input type="text" id='inp1'>
    <br>
    <span>是否为质数</span>
    <input type="text" id="inp2">
    <br>

    <!-- 外部引入js 文件 -->
    <script src="../js/tools_practice.js"></script>

    <script>
        //调用获取对象函数
        var oInp1 = get('inp1');

        //判断是否为闰年
        var year = leap_year(2004) ;
        
        //赋值给输入框
        if(year){
            oInp1.value = '是闰年' ;
        }
        else{
            oInp1.value = '不是闰年' ;
        }

        //调用随机数生成一个年份判断是否为闰年
        var y = rand(1000 , 2000) ;
        var res = leap_year(y) ;
        if(res){
            document.write('随机数' + y + '是闰年' +'&nbsp;&nbsp;&nbsp;&nbsp;') ;
        }
        else{
            document.write('随机数' + y + '不是闰年' + '&nbsp;&nbsp;&nbsp;&nbsp;') ;
        }



        //调用函数拿到相关对象
        var oInp2 = get('inp2') ;

        //输入框判断是否为质数
        var n = isZhi(14) ;

        //赋值给判断质数输入框
        if(n){
            oInp2.value = '是质数'
        }
        else{
            oInp2.value = '不是质数'
        }

        //调用随机数生成一个数字判断是否为质数
        var num = rand(0,1000) ;
        var res3 = isZhi(num) ;
        if(res3){
            document.write('随机数' + num + '是质数' +'&nbsp;&nbsp;&nbsp;&nbsp;') ;
        }
        else{
            document.write('随机数' + num + '不是质数' +'&nbsp;&nbsp;&nbsp;&nbsp;') ;
        }


        //封装函数，判断日期是否合法
        var da = data(1233,1,32) ;
        if(da){
            document.write('日期合法' +'&nbsp;&nbsp;&nbsp;&nbsp;') ;
        }
        else{
            document.write('日期不合法' +'&nbsp;&nbsp;&nbsp;&nbsp;') ;
        }

    </script>
</body>

js代码：

//功能：判断某年是否为闰年
//参数：
//   number
//返回值:
//   boolean
function leap_year(x) {
    if (x % 4 === 0 && x % 100 !== 0 || x % 400 === 0) {
        return true;
    }
    return false;
}

//获取对象
function get(id) {
    return document.getElementById(id);
}

//功能：产生某个范围内的随机整数
//参数：
//    min   number   范围最小值
//    max   number   范围最大值
//返回值：
//    number
function rand(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

//功能：判断一个数是否为质数
//参数 ：
//    number
//返回值：
//    boolean
function isZhi(n) {
    for (var i = 2; i < n; i++) {
        if (n % i === 0) {
            return false;
        }
    }
    return true;
}

//功能：判断日期是否合法
//参数：
//   y   number  年份
//   m   number  月份
//   d   number  日期
//返回值:
//   boolean
function data(y, m, d) {
    //先判断年 --> 在判断月 --> 在判断日期
    //判断年 ：
    if (y >= 1000 && y <= 2000 && y % 1 === 0) {
        //判断月
        if (m >= 1 && m <= 12 && m % 1 === 0) {
            var maxDay ;
            if (m === 1 || m === 3 || m === 5 || m === 7 || m === 8 || m === 10 || m === 12) {
                maxDay = 31;
            }
            else if (m === 4 || m === 6 || m === 9 || m === 11) {
                maxDay = 30;
            }
            else if (m === 2) {
                if (y % 4 === 0 && y % 100 != 0 || y % 400 === 0) {
                    maxDay = 29;
                }
                else {
                    maxDay = 28;
                }
            }
            //判断日期
            if(d >= 1 && d <= maxDay && d % 1 === 0){
                return true ;
            }
        }
    }
    return false ;
}

JS函数的定义与调用方法

JS函数调用的四种方法：方法调用模式，函数调用模式，构造器调用模式，apply,call调用模式

1.方法调用模式：

先定义一个对象，然后在对象的属性中定义方法，通过myobject.property来执行方法，this即指当前的myobject 对象。

var blogInfo={

　　blogId:123,

　　blogName:"werwr",

　　showBlog:function(){alert(this.blogId);}

};



blogInfo.showBlog();

2.函数调用模式

定义一个函数，设置一个变量名保存函数，这时this指向到window对象。

var myfunc = function(a,b){
　　return a+b;
}

alert(myfunc(3,4));

3.构造器调用模式

定义一个函数对象，在对象中定义属性，在其原型对象中定义方法。在使用prototype的方法时，必须实例化该对象才能调用其方法。

var myfunc = function(a){
　　this.a = a;
};

myfunc.prototype = {
　　show:function(){alert(this.a);}
}

var newfunc = new myfunc("123123123");
newfunc.show();

4.apply,call调用模式

var myobject={};
var sum = function(a,b){
　　return a+b;
};

var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]); 

alert(sum2);

总结

到此这篇关于JavaScript函数调用的文章就介绍到这了,更多相关JavaScript函数调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

比较详细的关于javascript中void(0)的具体含义解释
比较详细的关于javascript中void(0)的具体含义解释...
2007-08-08
JS实现两个大数(整数)相乘
大数，即超出语言所能表示的数字最大范围的数字，那么如何实现两个大数相乘呢？下面有个不错的方法，大家可以参考下
2014-04-04
div层的移动及性能优化
层的移动本来很简单，用jquery插件或者自己写一个也不难，但是最近一个ipad项目里，发现用手移动div会感觉很卡，体验很差（可能是ipad的配置根不上pc）。
2010-11-11
javascript消除window.close()的提示窗口
有人问起，怎么去掉js调用window.close()时怎么去掉那可恶的提示，咋一看好像还真不好弄，IE的安全机制好像就不允许通过脚本关闭本页面，但是IE好像可以允许js关闭弹出窗口，那我们是不是可以通过一定的技巧欺骗一下IE，绕过去呢。鼓捣了几下，似乎还真可以做到
2015-05-05
微信小程序视图容器(swiper)组件创建轮播图
这篇文章主要为大家详细介绍了微信小程序视图容器（swiper）组件创建轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-08-08
axios/fetch实现stream流式请求示例详解
这篇文章主要为大家介绍了axios/fetch实现stream流式请求示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-09-09
javascript 按键事件(兼容各浏览器)
本篇文章主要是对javascript中的按键事件进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript获取当前cpu使用率的方法
这篇文章主要介绍了JavaScript获取当前cpu使用率的方法,涉及JavaScript针对系统硬件操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-12-12
动态加载JavaScript文件的3种方式
第一种是使用document.write/writeln(）方式，第二种使用jQuery，第三种是使用原生js方法，感兴趣的小伙伴们可以参考一下
2018-05-05
JavaScript验证知识整理
本文主要介绍了JavaScript验证的相关知识整理。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03