call、apply和bind方法的用法、区别和使用场景

梦里梦外; 2022-10-07 01:53 142阅读 0赞

# apply、call #

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

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

先来一个栗子：

但是如果我们有一个对象banana= \{color : “yellow”\} ,我们不想对它重新定义 say 方法，那么我们可以通过 call 或 apply 用 apple 的 say 方法：

banana = { 
        color: "yellow"
    }
    apple.say.call(banana);     //My color is yellow
    apple.say.apply(banana);    //My color is yellow

所以，可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法（本栗子中banana没有say方法），但是其他的有（本栗子中apple有say方法），我们可以借助call或apply用其它对象的方法来操作。

# apply、call 的区别 #

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。例如，有一个函数定义如下：

var func = function(arg1, arg2) { 
         
    };

就可以通过如下方式来调用：

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

其中 this 是你想指定的上下文，他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，**call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。**

**JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时用 call 。  
而不确定的时候用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个伪数组来遍历所有的参数。**

# bind #

bind 和 call/apply 有一个很重要的区别，**一个函数被 call/apply 的时候，会立即执行函数，但是 bind 会创建一个新函数，不会立即执行**。

三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。

当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

如上，**bind另一个重要的区别是，后面传入的这个参数列表可以分多次传入，call和apply则必须一次性传入所有参数。**

示例：

var arr=[1,10,5,8,12];
    var max=Math.max.bind(null,arr[0],arr[1],arr[2],arr[3])
    console.log(max(arr[4])); //12，分两次传参

可以看出，bind方法可以分多次传参，最后函数运行时会把所有参数连接起来一起放入函数运行。

# 应用场景 #

**数组之间追加**

var array1 = [12 , "foo" , { name "Joe"} , -2458]; 
    var array2 = ["Doe" , 555 , 100]; 
    Array.prototype.push.apply(array1, array2); 
    /* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

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

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

**判断数据类型**

**Object.prototype.toString.call()**

var a = Object.prototype.toString;
    
    console.log(a.call("aaa"));
    console.log(a.call(1));
    console.log(a.call(true));
    console.log(a.call(null));
    console.log(a.call(undefined));
    console.log(a.call([]));
    console.log(a.call(function() { }));
    console.log(a.call({ }));

![在这里插入图片描述][20210615161211693.png]

# 参考 #

*  https://www.cnblogs.com/coco1s/p/4833199.html\#!comments
 *  https://zhuanlan.zhihu.com/p/82340026

[20210615161211693.png]: /images/20221005/676b5029095b45d1befc1c211952f572.png