js中call和apply的区别

助力数字生态，云产品优惠大促

腾讯云促销，1核1G 99元/1年，2核4G 1200元/3年

调用函数时, call和apply传递参数的方式不同

以名为showHide的函数为例:

function showHide(name1, name2){
    if(this.parentNode.parentNode.querySelector("table").style.display === "table"){
        this.parentNode.parentNode.querySelector("table").style.display = "none";
        this.querySelector("span").innerHTML = "(点击展开)";
    }else{
        this.parentNode.parentNode.querySelector("table").style.display = "table";
        this.querySelector("span").innerHTML = "(点击折叠)"+name1+","+name2;
    }
}

call可以按照顺序传递showHide.call(this, '桐人', '亚丝娜')
apply则是将参数放到一个数组, 统一传递showHide.apply(this, ['上条', '御坂'])

用call和apply实现相同的折叠的Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠表格的Demo</title>
</head>
<body>
    <script>

        function showHide(name1, name2){
            if(this.parentNode.parentNode.querySelector("table").style.display === "table"){
                this.parentNode.parentNode.querySelector("table").style.display = "none";
                this.querySelector("span").innerHTML = "(点击展开)";
            }else{
                this.parentNode.parentNode.querySelector("table").style.display = "table";
                this.querySelector("span").innerHTML = "(点击折叠)"+name1+","+name2;
            }
        }
    </script>

    <style>
        .title{
            font-size: 50px;
            color: #333333;
        }
        table img{
            width: 600px;
        }
        table {
            font-size: 20px;
        }

        table tr td{
            border: 1px solid #333333;
        }
    </style>
    <div>
        <div class="title"><p onclick="showHide.call(this, '桐人', '亚丝娜')" style="user-select: none">刀剑神域&nbsp;&nbsp;<span style="width: 30px;height: 30px; font-weight: bold;">(点击展开)</span></p></div>
        <table style="display:none;">
            <tr>
                <td><img src="./image/daojian.jpg"></td>
                <td style="width: 800px">2022年，电子机械制造商“ARGUS”开发“NERvGear”装戴在头上的机器，能够控制人类的脑神经连接虚拟世界，于是人类终于实现了完全的虚拟实境。
身为VRMMORPG（虚拟大规模线上角色扮演游戏）《刀剑神域〈SAO〉》中的其中一名玩家：桐人和其他一万个玩家才刚登入享受此游戏之时，游戏中的管理员对大家宣布了一个令人惊恐的消息──
那就是，现在唯一要登出此游戏的方法只有将这个游戏破关，并且在这个游戏中GAME OVER的话，也就代表了现实世界中的“死亡”。
桐人只能在这混乱的情况下，比其他玩家更早一步接受这个事实，投入了看不见终点的战斗之中……</td>
            </tr>
        </table>
    </div>
        <div>
        <div class="title"><p onclick="showHide.apply(this, ['上条', '御坂'])" style="user-select: none">魔法禁书目录&nbsp;&nbsp;<span style="width: 30px;height: 30px; font-weight: bold;">(点击展开)</span></p></div>
        <table style="display:none;">
            <tr>
                <td><img src="./image/jinshu.jpg"></td>
                <td style="width: 800px">故事讲述的是从东京都西部被分割出来的这座都市中，“超能力开发”被列为学校课程的一部分（学生作为人体科学实验对象）。在二百三十万人口中，有八成都是学生，所以被称为学园都市。他们每天都在超能力开发上进行相互竞争。根据能力高低不同，可以分为6级，从无能力（level 0）到超能力（level 5）。故事的主角上条当麻是学园里的一个无能力者，但并非完全没有能力，他的能力是能够将一切异能之力无效化。他只有右手能够使用这种能力，还给自己的这种连上帝的奇迹都能抹杀的能力取名为“幻想杀手”。而正因为他的右手似乎把神的祝福都给抹杀掉的缘故，导致自己一直过著不幸的生活。某一个暑假的日子，在家里的阳台上，他遇见了一位修女；这位少女自称自己的名字叫“茵蒂克丝”，并是从魔法的世界逃了出来，现在正在被魔法师追赶中。就这样，掌握了十万三千本究极魔法书的少女与拥有抹杀一切奇迹的神上之手的少年，将面临一系列故事……</td>
            </tr>
        </table>
    </div>
    
</body>
</html>

小结:

使用call和apply调用函数时, 往往需要传递一个this, 目的是确定被调用函数showHide运行时函数内部this的指向, 以上面的demo为例, 如果调用函数showHide时, 第一个参数没有传递this,那调用函数的主体就变成了document,而不是绑定了onclick的<p></p>节点, 这点需要关注

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。