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, sum


const 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, sum


const 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, sum


const 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