美文网首页IT修真院-前端
如何理解JS中的call及apply

如何理解JS中的call及apply

作者: xiaoyudesu | 来源:发表于2017-09-10 23:08 被阅读0次

    1.背景介绍

    在 javascript 中,call 和 apply都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。

    JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

    2.知识剖析

    call和apply的定义

    1.call()方法调用具有给定this值的函数和单独提供的参数。说白了就是改变this的指向
    2.apply()方法调用具有给定this值的函数,并作为数组(或类似数组的对象)提供。

    3.常见问题

    问题一:为什么要用call()和apply()方法?

    问题二:call()和apply()两种方法的区别

    4.解决方案

    比如有段这样的函数:

        function cat() {
        }
    
        cat.prototype = {
            food: "fish",
            say: function () {
                alert('I love ' + this.food);
            }
        };
        var blackCat = new cat;
        blackCat.say();
        var whiteDog = {food: 'bone'};
        blackCat.say.call(whiteDog);
    

    我们有一个对象whiteDog = {food:”bone”},我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

    call与apply的区别

    call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

    相同点:两个方法产生的作用是完全一样的。

    不同点:方法传递的参数不同call()接受的是一个参数列表,而apply()接受一个参数数组。

    func.call(this, arg1, arg2);
    func.apply(this, [arg1, arg2]);
    

    其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply则是把参数放在数组里。因此要说适用条件的话,当你的参数是明确知道数量时用 call 。 而不确定的时候用 apply,然后把参数 push 进数组传递进去。

    举个小栗子来区别call和apply

    获取数组中的最大值和最小值

    var numbers = [5, 458 , 120 , -215 ];
    var maxInNumbers = Math.max.apply(Math, numbers);//458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
    

    5.编码实战

    如上

    6.扩展思考

    还有哪些和call,apply类似的方法?

    bind() 方法

    bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。
    bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为
    this,传入 bind() 方法的第二个以及以后的参数,加上绑定函数运行时本身的参数,按照顺序作为原函数的参数来调用原函数。
    也就是说,区别是,当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call
    则会立即执行函数。

    7.参考文献

    参考一:【优雅代码】深入浅出妙用Javascript中apply、call、bind
    参考二:js中bind、call、apply函数的用法

    相关文章

      网友评论

        本文标题:如何理解JS中的call及apply

        本文链接:https://www.haomeiwen.com/subject/pvgtsxtx.html