JavaScript中 .call() 和 .apply()在项目中的实际用例

最新推荐文章于 2025-05-27 16:04:06 发布

原创最新推荐文章于 2025-05-27 16:04:06 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #.call() #.apply() #js #jquery

前端开发专栏收录该内容

8 篇文章

订阅专栏

本文探讨JavaScript中的.call()和.apply()方法，它们用于改变this的指向。主要区别在于call()的参数用逗号分隔，而apply()的参数为数组。在项目实践中，如处理点击事件，我们可以巧妙运用这两个方法来实现特定功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在JavaScript中call() 与 apply()都是用来改变 this 的指向的；

call()与apply()的不同点与相同点
- 第一参数都是目标对象，其他参数没有类型限制但又格式规定；
- 不同点是 call()的非第一参数用逗号分隔 '1,2,3' ，apply()的非第一参数为数组 '[1,2,3]'

明白了其使用方法和作用后我们就可以利用在项目开发当中了，下面举个例子：

我们在项目开发中一定会碰到 “ 点击按钮——>触发事件 ” 诸如此类需求，传统的方法呢：

//HTML
/*<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>*/

//Script  JQuery
var btn1 = $('#btn1'),
    btn2 = $('#btn2'),
    btn3 = $('#btn3');

btn1.click(function(){
    // to do something
})

btn2.click(function(){
    // to do something
})

btn3.click(function(){
    // to do something
})

如果使用call()函数我们怎么处理这类时间呢？

// HTML
/*<button id="btn1" data-type="create">创建</button>
<button id="btn2" data-type="del">删除</button>
<button id="btn3" data-type="modify">修改</button>*/

// Script JQuery
let active = {
    create(e) {
        console.log(active);
        console.log(e); //<button class="event" data-type="create">创建</button>
    },
    del(e) {
        console.log(active);
        console.log(e); //<button class="event" data-type="del">删除</button>
    },
    modify(e) {
        console.log(active);
        console.log(e); //<button class="event" data-type="modify">修改</button>
    }
}
$('button').on('click', function (e) {
    let eventType = e.currentTarget.dataset.type;
    //第一个参数传入了 目标对象  第二个参数传入了 当前点击按钮
    active[eventType] ? active[eventType].call(this, e.target) : '';
    //call  apply  第一个参数都必须是目标对象指针
    //call  apply  的区别是 其他参数  call是逗号分隔的1,2  apply第二参数是传入列表['1','2']，对参数类型没有限制
})