js中call和apply的区别

调用函数时, 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>节点, 这点需要关注

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫与算法进阶

来codewars与我一起玩耍吧

先看一道题目 如何使用代码表示“石头、剪刀、布”之间的关系。 即:石头 > 剪刀,剪刀 > 布, 剪刀 > 布 当时我想了很多,构造一个字典,和数字对应,但是...

35210
来自专栏平凡文摘

十年之后再看“面向对象”

1153
来自专栏程序人生

代码命名:僧敲月下门

忽一日於驴上吟得:‘鸟宿池中树,僧敲月下门。’初欲著‘推’字,或欲著‘敲’字,炼之未定,遂于驴上作‘推’字手势,又作‘敲’字手势。 - 《鉴戒录·贾忤旨》 两句...

2927
来自专栏精讲JAVA

十年之后再看“面向对象”

一起帮里有人问“面向对象”的问题。但我创建“一起帮”的目的是帮人解决“具体的”“实务性的”问题,“面向对象”太过于抽象,所以没批准发布。后来在QQ群里讨论,看他...

1826
来自专栏WOLFRAM

一行代码论英雄—2017 Wolfram 语言“一行代码竞赛”结果

2026
来自专栏新智元

让Python之父愤然退位的PEP572究竟是什么?

【新智元导读】在星期四的一份名为“权力转移”的邮件列表帖子中,Python之父Guido van Rossum写道:“现在PEP 572已经完成,我不再想为一个...

990
来自专栏Android知识点总结

Android粒子篇之文字的粒子化运动

1513
来自专栏Nian糕的私人厨房

腾讯课堂 IMWeb 七天前端求职提升营 Day 7

本次的系列博文主要是针对 腾讯课堂七天前端求职提升营 课程中,所推送的面试题目及编程练习的一次汇总,期间还包括三次直播课的分享,均由腾讯导师给大家讲解,该系列博...

1122
来自专栏牛客网

拼多多前端一面面经 && 【更新】热乎二面面经

希望面经积累的人品能进二面吧,总得来说挺简单的 1. 两栏布局,左边固定,要求先加载内容区域,说出多种方法 2 .正则对象test方法和exec方法的不同,分别...

6049
来自专栏CDA数据分析师

4大分析工具的代码表白术,520花式秀恩爱!

尽管笛卡尔和瑞典公主的故事已被证实只是杜撰,但因这个故事出名的心形函数被广为流传。今天又是一个虐单身狗的日分析师子,面对各种毫无新意的表白方式,让我们来看看理工...

30510

扫码关注云+社区

领取腾讯云代金券