广州做网站的企业,wordpress 百科,外贸网站好做吗,wordpress 引用图片javascript#xff1a;call()、apply()、bind()的区别和使用
1 前言
记录javascript的call、apply、bind方法绑定this的区别以及使用。
call、apply、bind的区别#xff1a;
【相同点】#xff1a;作用相同#xff0c;都是动态修改this指向#xff1b;都不会修改原先函…javascriptcall()、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.1call方法
可以传递两个参数。
第一个参数是指定函数内部中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.2apply方法
可以传递两个参数。
第一个参数是指定函数内部中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, sum2.3bind方法
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, sum2.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
