js中call、apply、bind的用法及区别

叁歲伎倆 2022-05-30 09:59 271阅读 0赞

call、apply和bind：三者作用一致（都是改变函数的this指向），只是使用的方法不同而已。

*  apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
 *  apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
 *  apply 、 call 、bind 三者都可以利用后续参数传参；
 *  bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

## **call方法** ##

语法：call(\[thisObj\[,arg1\[, arg2\[,   \[,.argN\]\]\]\]\])

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

thisObj 的取值有以下4种情况：

（1） 不传，或者传null,undefined， 函数中的this指向window对象  
（2） 传递另一个函数的函数名，函数中的this指向这个函数的引用  
（3） 传递字符串、数值或布尔类型等基础类型，函数中的this指向其对应的包装对象，如 String、Number、Boolean  
（4） 传递一个对象，函数中的this指向这个对象

## apply方法： ##

语法：apply(\[thisObj\[,argArray\]\])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数

## bind方法： ##

bind是在EcmaScript5中扩展的方法（IE6,7,8不支持）

bind() 方法与 apply 和 call 很相似，也是可以改变函数体内this的指向。

MDN的解释是：`bind() `方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 `bind() `方法的第一个参数作为this，传入 ``bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

注意:bind方法的返回值是函数

var bar = function(){
    console.log(this.x);
    }
    var foo = {
    x:3
    }
    bar(); // undefined
    var func = bar.bind(foo);
    func(); // 3

##  ##

传参可以是在绑定的时候传，也可以是在调用的时候进行传参

function obj2(x,y){
            this.style.background = "yellow";
            console.log(x+y)
        }
        oDiv1.onclick = obj2.bind(oDiv,1,2)();
        oDiv1.onclick = obj2.bind(oDiv)(1,2);
        oDiv1.onclick = obj2.bind(oDiv,1)(2);

## call和apply进行比较 ##

call, apply作用就是借用别人的方法来调用,就像调用自己的一样.

apply 接受两个参数，第一个参数指定了函数体内this 对象的指向，第二个参数为一个带下  
标的集合，这个集合可以为数组，也可以为类数组，apply 方法把这个集合中的元素作为参数传  
递给被调用的函数：

var func = function( a, b, c ){
        alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
    };
    func.apply( null, [ 1, 2, 3 ] );

在这段代码中，参数 1、2、3 被放在数组中一起传入func 函数，它们分别对应func 参数列

表中的a、b、c。

call 传入的参数数量不固定，第一个参数也是代表函数体内的this 指向，  
从第二个参数开始往后，每个参数被依次传入函数：

var func = function( a, b, c ){
        alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
    };
    func.call( null, 1, 2, 3 );

当调用一个函数时，JavaScript 的解释器并不会计较形参和实参在数量、类型以及顺序上的区别，JavaScript 的参数在内部就是用一个数组来表示的。从这个意义上说，apply 比call 的使用率更高，我们不必关心具体有多少参数被传入函数，只要用apply 一股脑地推过去就可以了。call 是包装在apply 上面的一颗语法糖，如果我们明确地知道函数接受多少个参数，而且想一目了然地表达形参和实参的对应关系，那么也可以用call 来传送参数。

##  apply、call、bind比较 ##

那么 apply、call、bind 三者相比较，之间又有什么异同呢？何时使用 apply、call，何时使用 bind 呢。简单的一个例子：

三个输出的都是81，但是注意看使用 bind() 方法的，他后面多了对括号。

也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。

##  ##

参考：[https://www.cnblogs.com/libin-1/p/6069031.html][https_www.cnblogs.com_libin-1_p_6069031.html]

[https_www.cnblogs.com_libin-1_p_6069031.html]: https://www.cnblogs.com/libin-1/p/6069031.html