JavaScript中函数详解

最新推荐文章于 2024-03-07 20:44:12 发布

杏黄的三叶草

最新推荐文章于 2024-03-07 20:44:12 发布

阅读量131

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104508714

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

函数作为参数使用

function animal(fn) {
        console.log("可是谁又真的关心谁");
        fn();
    }
    function dog() {
        console.log("若是爱已不可为");
    }
    animal(dog);
    animal(function () {
        console.log("明白之后无所谓");
    })

在这里插入图片描述

函数作为返回值使用

    function f1() {
        console.log("可笑吧，我终于一人孤独终老了");
        return function () {
            console.log("心里念念不忘的还是那个她");
        };
    }
    var f2=f1();
    f2();

在这里插入图片描述

 * toString()方法Object的原型方法，用来输出Object的数据类型[输出的是字符串形式]
 * 其他对象也可以调用Object的原型对象，只需要改变this的指向

 //创建一个函数，用来获取某个对象的类型是不是你传入的类型
    function getFunc(type) {
        return function (obj) {
            return type===Object.prototype.toString.call(obj);
        };
    }
    var ff = getFunc("[object Array]");
    var result = ff([10, 20, 30]);
    console.log(result);//true

    var ff1 = getFunc("[object Object]");
    var dt = new Date();
    var result1 = ff1(dt);
    console.log(result1);//false

Array中的sort()方法不仅可以对数值和字符串进行排序，还可以将对象按照某个属性排序

//将电影按照某个属性进行排序
    function File(name,size,time) {
        this.name=name;
        this.size=size;
        this.time=time;
    }
    var f1 = new File("jack.avi", "400M", "1997-12-12");
    var f2 = new File("tom.avi", "200M", "2017-12-12");
    var f3 = new File("xw.avi", "800M", "2010-12-12");
    var array=[f1,f2,f3];
    function fn(attribute) {
        return function (a,b) {
            if(a[attribute]>b[attribute]){
                return 1;
            }
            if(a[attribute]<b[attribute]){
                return -1;
            }
            return 0;
        }
    }
    var compare=fn("time");
    array.sort(compare);
    for(var i=0;i<array.length;i++){
        console.log(array[i].size+"====>"+array[i].name+"====>"+array[i].time);
    }

在这里插入图片描述

函数的闭包

* 闭包的概念:函数A中，有一个函数B，函数B中可以访问函数A中定义的变量，此时形成了闭包
* 闭包的模式:函数模式的闭包，对象模式的闭包
* 闭包的作用:缓存数据，延长作用域链
* 闭包的优点和缺点:缓存数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //函数模式的闭包:在一个函数中有另一个函数
    function f1() {
        var num=10;
        function f2() {
            console.log(num);
        }
        f2();
    }
    f1();

    //对象模式的闭包:在一个函数中有一个对象
    function f3() {
        var num1=23;
        var obj={
            age:num1
        };
        console.log(obj.age);
    }
    f3();

    //延长作用域链，缓存数据
    function f4() {
        var num2=34;
        return function () {
            console.log(num2);
            return num2;
        }
    }
    var fn=f4();
    var fn1=fn();
    console.log(fn1);

    function f5() {
        var num3=45;
        return {
            age:num3
        }
    }
    var obj=f5();
    console.log(obj.age);
</script>
</body>
</html>

闭包案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    * 总结:
    * 如果想要缓存数据，就把数据放在外层函数和里层函数的中间位置
    * 闭包的作用和缺点:缓存数据。(数据没有及时的释放)
    * 局部变量在函数中，函数使用结束后，局部变量就会被自动释放
    * 闭包中，里面的局部变量的作用域链将被延长
    * */
    //普通函数
    function getRandom() {
        var num=parseInt(Math.random()*10+1);
        console.log(num);
    }
    getRandom();
    getRandom();

    //函数模式的闭包
    function getRandom1() {
        var num1=parseInt(Math.random()*10+1);
        return function () {
            console.log(num1);
        }
    }
    var fn=getRandom1();
    fn();
    fn();
    fn();
</script>
</body>
</html>

沙箱

沙箱(sandbox):是一个虚拟系统程序，允许你在沙盘环境中运行浏览器或其他程序，因此运行所产生的变化可以随后删除。它创造了一个类似沙盒
的独立作业环境，在其内部运行的程序并不能对硬盘产生永久性的影响。其为一个独立的虚拟环境，可以测试不受信任的应用程序或网上行为。
在该环境定义的变量和外面定义的变量是不冲突的
作用:用于解决变量名重名的问题

沙箱案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>我只是个陪伴着</div>
<div>陪着你伤心难过</div>
<div>寂寞他每天数着</div>
<p>你那么多的失落</p>
<p>你想要什么你说</p>
<p>只要我现在有的</p>
<p>努力把伤心变少笑容变多就好了</p>
<script>
    //解决了函数名冲突的问题
    var obj1 = 23;
    var obj2 = 34;
    (function () {
        var obj1 = document.getElementsByTagName("div");
        for (var i = 0; i < obj1.length; i++) {
            obj1[i].style.border = "2px solid yellow";
        }
        var obj2 = document.getElementsByTagName("p");
        for (var i = 0; i < obj2.length; i++) {
            obj2[i].style.border = "2px solid blue";
        }
    }());
    console.log(obj1);
    console.log(obj2);
</script>
</body>
</html>

函数递归

递归:函数中调用函数自己，递归一定要有递归结束条件

递归案例

  //用递归实现数字求和
    function getSum(n) {
        if(n==1){
            return 1;
        }
        return n+getSum(n-1);
    }
    console.log(getSum(100));
//----------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //求一个数字各个位数上的数字和
    function getSum(n) {
        if(n<10){
            return n;
        }
        //每次获取的都是这个数字的个位数
        return n%10+getSum(parseInt(n/10));
    }
    console.log(getSum(1982));

    //求斐波那契数列
    function getFib(x) {
        if(x==1||x==2){
            return 1;
        }
        return  getFib(x-1)+getFib(x-2);
    }
    console.log(getFib(12));
</script>
</body>
</html>