JS中的call、apply在干什么

淩亂°似流年 2023-02-10 07:39 11阅读 0赞

**目录**

前言

call、apply的两大作用

1、改变this指向

2、借用原生方法

call与apply区别

--------------------

# 前言 #

网上的解释多是说改变 **this** 的指向，此说法没错，但肯定没这么简单。

# call、apply的两大作用 #

## 1、改变this指向 ##

对**this与对象原型**的掌握牢靠的同学肯定知道，this只跟调用点的绑定方式有关！

绑定方式总共有四种：

*  **默认绑定**
 *  **明确绑定**
 *  **隐含绑定**
 *  **new绑定**

其中**明确绑定**就是利用 **call **或 **apply** 来强制一个函数调用使用某个特定对象作为 this 绑定

function foo() {
        console.log( this.a )
    }
     
    var obj = {
        a:2
    }
    
    // 通过call,将foo的this指向绑定到obj
    foo.call( obj )    // 2

[具体this指向查看本文][this]

## 2、借用原生方法 ##

*注意这里是**借用**，**不是调用**，由于很多教程会专门讲 call、apply调用方法的功能，所以很多0基础同学会可能以为这里搞错了。其实上面 this章节就体现了调用方法的一方面。在改变 this指向的同时，我们也看到了方法结果被打印出来。*

我们都知道，在JavaScript中，无论数组还是字符串都有许多诸如 .toStrng .length 的原生方法。但对象能用的原生方法很少，这就需要**借用别的原生方法来满足自身需要，**借用的途径就是通过 call或apply.

比如我们有个**类数组对象**：

var anArrayLikeObj = {0:"Martin", 1:78, 2:67, 3:["Letta", "Marieta", "Pauline"], length:4 };

就可以通过call借用**数组**的原生方法：

// 通过call 借用Array的slice方法
    var newArray = Array.prototype.slice.call(anArrayLikeObj, 0);
    
    // 注意，类数组中的length是其长度的，不会被打印
    console.log(newArray); // ["Martin", 78, 67, Array[3]]

可以看到，通过 **Array.prototype.slice.call(anArrayLikeObj)** 将 **Array.prototype.slice** 的方法 **赋予了anArrayLikeObj** ，仔细体会这段代码！

再看一个例子增强体会：

var bar = function () {
        this.a = '2'
    }
    
    var baz = function () {
        this.getNumber = function () {
            console.log(this.a)
        }
    
        // 将bar的方法属性赋予this
        bar.call(this)
    }
    
    var a = '5'
    
    // 赋值会绑定丢失，所以要用new绑定
    var baz = new baz()
    
    baz.getNumber()    // 2

**bar.call(this) ** bar函数通过 call 将其方法和属性绑定到this

# call与apply区别 #

它们的区别主要是传参方式的区别，它们第一个参数都是用作函数上下文的对象（也就是this的指向对象）。

后面的参数为调用函数的参数，call 是**依次排列**，apply 是装在**数组中。**

function foo(firstargs,lastargs){
        console.log(firstargs + ',' + lastargs + ',' + this.a)
    }
    
    obj = {
        a: 3
    }
    
    foo.apply(obj,['1','2'])    // 1,2,3
    
    foo.call(obj,'1','2')    //1,2,3

[this]: https://blog.csdn.net/YNEWA/article/details/106250000#%E6%98%8E%E7%A1%AE%E7%BB%91%E5%AE%9A%EF%BC%88Explicit%20Binding%EF%BC%89