call apply bind函数区别 和 简单手写

首先需要了解

相同点
call apply bind 三个函数 都是起着改变this指向的作用

不同点
1.call和apply的传参不同，call(对象，参数1，参数2，…)调用支持多参，而apply只支持2个参数apply(对象，传参数组)
[function].call([object],参数1，参数2，…参数n)
[function].apply([object],[参数1，参数2，参数3，…参数n])
2.call和apply改变的是一个函数调用的this指向，bind返回一个this指向已经改变的新函数

this指向改变原理
在js中 function中的this 谁调用this就指向谁 无人调用this默认指向window
object.function() 对象调用函数 那么这个function中的this就指向这个对象

手写call

//定义一个加减方法
function add(a,b){
    return a+b+this.c
}
const obj ={
    c:10
}

//定义自己的call函数（参数1:要改变this指向的函数，this指向的对象，函数的参数）
const call = function (func,obj,...args){
    //先判断  是否传入了obj   如过没有   就将window传进去
    if(obj == null || obj ==undefined){
        //globalThis 会根据环境自动识别 在浏览器环境就是window 在node环境globalProject
        obj = globalThis
    }
    //第一步  将传入的函数拷贝给对象中
      obj.test=func
      //第二步   用对象.函数的方法调用该函数并传参返回
      const result =  obj.test(...args)
      //每次调用完删除加入的函数
      delete obj.test
      //返回计算结果
      return result
}
console.log(call(add,obj,10,10));

手写apply
和call差不多 只不过 传递的参数不同

//定义一个加减方法
function add(a,b){
    return a+b+this.c
}
const obj ={
    c:10
}

//定义自己的call函数（参数1:要改变this指向的函数，this指向的对象，函数的参数）
const call = function (func,obj,args){//只有此处和call有区别
    //先判断  是否传入了obj   如过没有   就将window传进去
    if(obj == null || obj ==undefined){
        //globalThis 会根据环境自动识别 在浏览器环境就是window 在node环境globalProject
        obj = globalThis
    }
    //第一步  将传入的函数拷贝给对象中
      obj.test=func
      //第二步   用对象.函数的方法调用该函数并传参返回
      const result =  obj.test(...args)
      //每次调用完删除加入的函数
      delete obj.test
      //返回计算结果
      return result
}
console.log(call(add,obj,10,10));