专栏首页木子昭的博客js中call和apply的区别

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 条评论
登录 后参与评论

相关文章

  • 学习React中ref的两个demo

    虚拟Dom虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的。为了获取文本输入框的一些操作, 还是js原生的事件绑定机制最好用~

    zhaoolee
  • 用wepy制作简易签名板

    zhaoolee
  • 用Electron创建跨平台应用(第一弹)

    zhaoolee
  • 美化ThinkPHP

    然后我们修改这里面的代码就行的。下面的模板是我自己项目修改用的。大家也可以用AJAX加载的。

    似水的流年
  • 美化ThinkPHP

    首先我们来看看Thinkphp的模板, 成功界面: ? 错误页面 ? 说到美化的话,我们需要先找到这个模板在那里 ThinkPHP/Tp...

    似水的流年
  • Vivado 2018.3这个Gadget你用了吗

    在Vivado 2018.3的Project Summary窗口中,新增了dashboard按钮,其主要功能是用于显示更多细节信息,同时,可用于不同Design...

    Lauren的FPGA
  • JS的左右两列自动拉伸对齐

    前边发了个后遗症比较多的自动对齐,现在发个JS的高度自动对齐代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T...

    练小习
  • 制作H5响应式页面注意事项、微信二次分享

    1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

    用户1148399
  • 所有的类都需要导包才能使用,除了两种情况不需要导包就可以使用

    黑泽君
  • jQuery基础--创建节点和 添加节点

    eadela

扫码关注云+社区

领取腾讯云代金券