call，apply,bind方法的使用和实现

引言

JavaScript的call，apply，bind方法是函数对象的三个方法，都用于改变函数的this指向。这三个方法有着相似的功能，但是在参数和行为上有一些差异。理解这三个方法的用法和差异，对于理解JavaScript的函数和this机制非常有帮助。

call方法的使用和实现

call方法的基本用法是：func.call(thisArg, arg1, arg2, ...)。其中，thisArg是func函数在运行时的this值，arg1, arg2, ...是传递给func的参数。

以下是使用call方法的一个例子：

let obj = {
  name: 'zs',
  age: 18
}

function person(val){
  console.log(this.name +' age is '+ this.age)
  console.log(val) //这是传进来的值
}

// 使用call修改this指向
person.call(obj, '修改this指向') // zs age is 18 修改this指向

我们也可以自己实现一个call方法：

function callNew(fn, obj, ...args){
  obj.temp = fn
  let res = obj.temp(...args)
  delete obj.temp
  return res
}

apply方法的使用和实现

apply方法的基本用法是：func.apply(thisArg, [argsArray])。其中，thisArg是func函数在运行时的this值，[argsArray]是传递给func的参数数组。

以下是使用apply方法的一个例子：

const obj = {
  name: "ls",
  age: 81,
};

function person(val1, val2) {
  name = "ww";
  console.log(this.name + "age is" + this.age);
  console.log(val1, val2);
}

// 使用apply修改this指向
person.apply(obj, ['值1', '值2']);

我们也可以自己实现一个apply方法：

function applyNew(fn, obj, val) {
  obj.temp = fn;
  obj.temp(...val);
  delete obj.temp
}

bind方法的使用和实现

bind方法的基本用法是：func.bind(thisArg[, arg1[, arg2[, ...]]])。其中，thisArg是func函数在运行时的this值，arg1, arg2, ...是传递给func的参数。

以下是使用bind方法的一个例子：

const obj = {
  name: "张三",
  age: 18,
};

function person(val1, val2) {
  console.log(this.name + "的年龄为" + this.age, val1, val2);
}

let res = person.bind(obj, "值1");
res("值2");

我们也可以自己实现一个bind方法：

function bindNew(fn,obj, ...args) {
  return function(...params){
      obj.temp = fn
      obj.temp(...args,...params)
      delete obj.temp
  }
};

总结

call，apply，bind方法都是函数对象的方法，用于改变函数的this指向。虽然这三个方法有着相似的功能，但是在参数和行为上有一些差异。理解这三个方法的用法和差异，以及如何自己实现这些方法，对于理解JavaScript的函数和this机制非常有帮助