平凡之路。

call,Apply,bind

Date: Author: ZJ

本文章采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。

call,Apply,bind的含义与使用

JavaScript的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,那么如何控制住这个善变的小家伙呢。

1. call&apply

  • Function.prototype.call和Function.prototype.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 传入的参数数量不固定,跟 apply 相同的是,第一个参数也是代表函数体内的 this 指向,从第二个参数开始往后,每个参数被依次传入函数:

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

当使用 call 或者 apply 的时候,如果我们传入的第一个参数为 null,函数体内的 this 会指 向默认的宿主对象,在浏览器中则是 window; 但如果是在严格模式下,函数体内的 this 还是为 null.

2. bind

bind方法接收只一个参数,用来修改函数中的this。此外与call&bind的区别在于修改完this之后需要手动调用函数,函数才可以执行。

//在不支持bind方法的环境中用如下函数部署bind
Function.prototype.bind = function(context){
    var _this = this;
    return function() {
        return _this.apply(context,arguments)
    }
};

3. 总结

  • call 是包装在 apply 上面的一颗语法糖,如果我们明确地知道函数接受多少个参数, 而且想 一目了然地表达形参和实参的对应关系,那么也可以用 call 来传送参数。

  • 作用 他们的作用都是改变函数内部的this。 这三个函数都是函数对象的方法,也就是说只有函数才可以直接调用这些方法。

  • 区别

    • 参数: 三个函数的第一个参数都是需要绑定的 this。
      • call: 可以有n个参数,从第二个参数开始的所有参数都是原函数的参数。
      • apply:只有两个参数,并且第二个参数必须为数组,数组中的所有元素一一对应原函数的参数。
      • bind: 只有一个参数,即要绑定的this。
    • 调用:
      • call,apply:调用后立即执行原函数。
      • bind:调用后返回已经绑定好this的函数

对于本文内容有问题或建议的小伙伴,欢迎在文章底部留言交流讨论。