javascript：call()、apply()、bind()的区别和使用

javascript：call()、apply()、bind()的区别和使用

1 前言

记录javascript的call、apply、bind方法绑定this的区别以及使用。

call、apply、bind的区别：

【相同点】：作用相同，都是动态修改this指向；都不会修改原先函数的this指向。【异同点】：1)执行方式不同：call和apply是改变后页面加载之后就立即执行，是同步代码。bind是异步代码，改变后不会立即执行；而是返回一个新的函数。2)传参方式不同：call和bind传参是一个一个逐一传入，不能使用剩余参数的方式传参。apply可以使用数组的方式传入的，只要是数组方式就可以使用剩余参数的方式传入。3)修改this的性质不同：call、apply只是临时的修改一次，也就是call和apply方法的那一次；当再次调用原函数的时候，
它的指向还是原来的指向。

2 使用

（2.1）call方法：

可以传递两个参数。

第一个参数是指定函数内部中this的指向，也就是函数执行时所在的作用域：
（1）参数值为null或undefined或者this，则等同于指向全局对象
（2）但不能为空

第二个参数是函数调用时需要传递的参数，需要一个一个的传入（…param, 这里的param指多个参数）

const arr = [1, 2, 3];function fn(...param){let sum = param.reduce((sum, item) => sum += item, 100);console.log(this)console.log(this === global)console.log(param, sum);    
}fn(...arr);
// 
{/* <ref *1> Object [global] {global: [Circular *1],clearInterval: [Function: clearInterval],clearTimeout: [Function: clearTimeout],setInterval: [Function: setInterval],setTimeout: [Function: setTimeout] {[Symbol(nodejs.util.promisify.custom)]: [Getter]},queueMicrotask: [Function: queueMicrotask],performance: Performance {nodeTiming: PerformanceNodeTiming {name: 'node',entryType: 'node',startTime: 0,duration: 46.88289999961853,nodeStart: 0.7335000038146973,v8Start: 3.3949999809265137,bootstrapComplete: 34.72550010681152,environment: 18.64549994468689,loopStart: -1,loopExit: -1,idleTime: 0},timeOrigin: 1712891540492.09},clearImmediate: [Function: clearImmediate],setImmediate: [Function: setImmediate] {[Symbol(nodejs.util.promisify.custom)]: [Getter]},structuredClone: [Function: structuredClone]
} */}             //-- 对应 this
// true             -- 对应 this === global
//[ 1, 2, 3 ] 106   -- 对应 param, sumconst obj = {name: '小徐'
}fn.call(obj, 5, 6);
// { name: '小徐' }   -- 对应 this
// false              -- 对应 this === global
// [ 5, 6 ] 111       -- 对应 param, sum

上述call方法，传入的第二个参数时，是多个参数传的，而apply传入参数可以使用数组，且call是立即执行的。在Node中，function不绑定this的情况下，this指的就是全局对象global；而一旦call方法指定了this对象，如obj，那么this指向的就是obj对象了。

（2.2）apply方法：

可以传递两个参数。

第一个参数是指定函数内部中this的指向，也就是函数执行时所在的作用域：
（1）参数值为null或undefined或者this，则等同于指向全局对象
（2）但不能为空

第二个参数是函数调用时需要传递的参数，是一个数组（[param1, param2…]）

const arr = [1, 2, 3];function fn(...param){let sum = param.reduce((sum, item) => sum += item, 100);console.log(this)console.log(this === global)console.log(param, sum);    
}fn(...arr);
// this指的global，这里忽略具体打印
// true             -- 对应 this === global
//[ 1, 2, 3 ] 106   -- 对应 param, sumconst obj = {name: '小徐'
}fn.apply(obj, [7, 8]);
// { name: '小徐' }   -- 对应 this
// false              -- 对应 this === global
// [ 7, 8 ] 115       -- 对应 param, sum

（2.3）bind方法：

bind方法用于指定函数内部的this指向（执行时所在的作用域），然后返回一个新函数。bind方法并非立即执行一个函数。

第一个参数是指定函数内部中this的指向，也就是函数执行时所在的作用域：
（1）参数值为null或undefined或者this，则等同于指向全局对象
（2）但不能为空

第二个参数是函数调用时需要传递的参数，需要一个一个的传入（…param, 这里的param指多个参数）

const arr = [1, 2, 3];function fn(...param){let sum = param.reduce((sum, item) => sum += item, 100);console.log(this)console.log(this === global)console.log(param, sum);    
}fn(...arr);
// this指的global，这里忽略具体打印
// true             -- 对应 this === global
//[ 1, 2, 3 ] 106   -- 对应 param, sumconst obj = {name: '小徐'
}let fnc = fn.bind(obj, 9, 10);    //  不会立即执行，而是返回函数对象console.log("bind后执行函数: ")
fnc()
// bind后执行函数:
// { name: '小徐' }   -- 对应 this
// false              -- 对应 this === global
// [ 9, 10 ] 119      -- 对应 param, sum

（2.4）上述三种绑定this的方式中，call、apply只是临时修改this的绑定，再次执行原函数this指向不会发生改变。bind返回的函数对象会修改this的绑定，但原函数this指向依然不发生变化。

const obj = {name: '小徐'
}function fn(){console.log(this === obj);
};fn();           //false  (说明this还是global全局对象)fn.call(obj);   //true   (说明this是obj对象)fn.apply(obj);  //true   (说明this是obj对象)fn()            //false  (说明this还是global全局对象，
// call和apply无法改变原本函数的this绑定)

bind返回的函数对象是绑定了指定this的，但是原函数的this绑定依然不会发生改变：

const obj = {name: '小徐'
}function fn(){console.log(this === obj);
};fn();           //false  (说明this还是global全局对象)fn.call(obj);   //true   (说明this是obj对象)fn.apply(obj);  //true   (说明this是obj对象)fn()            //false  (说明this还是global全局对象，
// call和apply无法改变原本函数的this绑定)console.log("执行了bind后: ")
let fnc = fn.bind(obj);
fnc();  //true
fn();   //false// 执行了bind后:
// true
// false