JavaScript call、apply、bind方法总结

127 阅读2分钟

一、三者异同

  • 在 JavaScript 中,call、apply、bind 都是 Function 对象自带的方法,这三个方法的主要作用是改变函数中的 this 指向

  • apply、call、 bind 三者第一个参数都是 this 要指向的对象,并且都可以利用后续参数传参

  • bind 是返回修改 this 后对应函数,便于稍后调用;而 apply、call 则是立即调用

二、call(thisArgs,args1,args2,......)

  • call 方法可以接收多个参数,第一个参数就是thisArgs,thisArgs指定了函数在运行期的调用者,也就是函数中的 this 对象,后面的所有参数会被传入调用函数中

  • call 方法第一个参数的四种情况

    1. 不传,或者传 null , undefined , 函数中的this指向 window 对象

    2. 传递另一个函数的函数名,函数中的 this 指向这个函数的引用

    3. 传递字符串、数值或布尔类型等基础类型,函数中的 this 指向其对应的包装对象,如 String、Number、Boolean

    4. 传递一个对象,函数中的 this 指向这个对象

function a(){   
  console.log(this);   //输出函数a中的this对象
}       

function b(){}       

var c = { name : "call" }   //定义对象c  

// 情况一
a.call();   //window
a.call(null);   //window
a.call(undefined);   //window

// 情况二
a.call(b);   //function b(){}

// 情况三
a.call(1);   // Number {1}
a.call('');   // String {''}
a.call(true);   // Boolean {true}

// 情况 4
a.call(c);   // {name: 'call'}

三、apply(thisArgs,[...args])

  • apply 方法最多只能接收两个参数,第一个参数是新的this对象,第二个参数是一个数组(或者类数组);虽然 apply 方法第二个参数接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递

  • apply 和 call 的功能是一样的,只是传入的参数列表形式不同

//定义一个add 方法
function add(x, y) {
    return x + y;
}

// 使用 call 来调用 add 方法
add.call(this, 10, 20) 
// 使用 apply 来调用 add 方法
add.apply(this, [10, 20]) 

// 结果是一样的

四、bind(thisArgs,args1,args2,......) 

  • bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向,bind() 方法接收参数的方式是和 call 方法一摸一样的

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

  • 也就是说调用 bind() 方法时候,不会立即去调用函数,而是返回一个修改了this指向的函数

var x = 0
function fn(){   
  console.log(this.x);   
}
const obj = { x:1 }   

fn() 

const fu2 = fn.bind(obj)
fu2()
// 输出:
// 0
// 1