call、apply和bind的区别

call、apply和bind的区别

  • callapply被称为立即调用函数执行,函数调用callapply方法后会立即执行函数。两个方法的用法相似,但不同点在于传递的参数。

  • bind方法被函数调用后不会立即执行函数。

  • 这三种方法中传递的第一个参数都是修改this指向,this指向传递的一个参数

1、call

  • call第一个参数传递的是修改this指向的参数,后面的参数是执行函数时传递给函数的参数,可以不传递。
  • 在非严格模式下,如果不传第一个参数,或者第一个参数是nullundefinedthis都指向window
let fun = function(a,b){
    
    
    console.log(this,a,b);
}
let obj = {
    
    name:"obj"};
fun.call(obj,1,2);    // this:obj    a:1         b:2
fun.call(1,2);        // this:1      a:2         b:undefined
fun.call();           // this:window a:undefined b:undefined
fun.call(null);       // this=window a=undefined b=undefined
fun.call(undefined);  // this=window a=undefined b=undefined
  • 在严格模式下,this指向第一个参数,包括nullundefined,如果不传第一个参数this就是undefined
"use strict"
let fun = function(a,b){
    
    
    console.log(this,a,b);
}
let obj = {
    
    name:"obj"};
fun.call(obj,1,2);   // this:obj        a:1          b:2
fun.call(1,2);       // this:1          a:2          b=undefined
fun.call();          // this:undefined  a:undefined  b:undefined
fun.call(null);      // this:null       a:undefined  b:undefined
fun.call(undefined); // this:undefined  a:undefined  b:undefined

2、apply

  • applycall的用法相似,但apply仅仅有两个参数,第一个参数依然是修改this指向,第二个参数传递的是一个数组。
let fun=function(arr){
    
    
    console.log(this,arr)
}
let obj = {
    
    name:"obj"};
fun.apply(obj,[1,2,3]);// this:obj        arr:[1,2,3]
  • 拓展:我们可能会遇到这种情况,需要求一个数组中的最大数,通常使用的办法是将数组排序取最大的那一个,也有人可能会想到Math函数中的max方法,但是max方法中传递的是一个个数,此时我们就可以使用apply将数组传递给Math.max()
let arr=[3,6,8,45,12,96,20,2,13]
console.log(Math.max.apply(null,arr))// 96

3、bind

  • bind的用法和call用法一模一样,区别在于不会立即执行函数
const module = {
    
    
  x: 42,
  getX: function() {
    
    
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX());// undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());// 42

const boundGetX1 = unboundGetX.call(module);
console.log(boundGetX1);// 42

const boundGetX2 = unboundGetX.apply(module);
console.log(boundGetX2);// 42

猜你喜欢

转载自blog.csdn.net/qq_45099813/article/details/121082408