豆各庄做网站的公司深圳市无限空间工业设计有限公司
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