call,apply,bind的用法和区别以及使用场景

前端工作和面试经常会遇到修改this方向的问题，绕不开call,apply,bind的讨论用法一、调用语法：function.call(thisArg,arg1,arg2,...)其中：thisArg是可选值；当指定为null或undefined时，将自动替换为全局对象（严格模式下为undefined）；指定为数字、字符串或布尔类型，将被转换成它们的包装对象。就是函数函数在运行时指向的this值。arg1,arg2,...指定的参数可以有多个返回值：用指定的this值和parameters调用函数的结果。使用场景：//判断数据类型consta=1constb='1'constc=trueconstd=()=>{}toString.call(a)//输出'[objectNumber]'toString.call(b)//输出'[objectString]'toString.call(c)//输出'[objectBoolean]'toString.call(d)//输出'[objectFunction]'//将伪数组转换为数组functiontransformArgement(){constarr=Array.prototype.slice.call(arguments)returnarr}console.log(transformArgement(1,2,3,4,5))//输出[1,2,3,4,5]//通过调用父构造函数的call方法实现继承Calc(args){constarr=Array.prototype.slice.call(args)//最大值this.max=Math.max.apply(null,arr)//最小值this.min=Math.min.apply(null,arr)//求和this.sum=arr.reduce((pre,cur)=>pre+cur)}functionAges(){Calc.call(this,arguments)this.property='ages'}constteam01=newAges(10,20,12,80,4,100,19)console.log(team01.min)//输出4console.log(team01.max)//输出100console.log(team01.sum)//输出2452argsArray指定的参数可以是一个数组或类数组对象，其中数组元素将作为单独的参数传递给函数返回值：使用指定的this值和参数调用函数的结果使用场景：//添加数组元素到数组constarr1=[1,2,3]constarr2=['1','2','3']Array.prototype.push.apply(arr1,arr2)console.log(arr1)//输出[1,2,3,'1','2','3']//数组转换constslice=Array.prototype.slice;functionargs(){returnslice.apply(arguments)}args(1,2,3,4)//return[1,2,3,4]//内置函数的扩展constarrNum=[1,4,6,3,2]console.log(Math.min.apply(null,arrNum))console.log(Math.max.apply(null,arrNum))3。绑定语法：function.bind(thisArg,arg1,arg2,...)其中：thisArg是调用绑定函数时作为this参数传递给目标函数的值。如果绑定函数是使用new运算符构造的，则忽略此值。当使用bind在setTimeout中创建函数（作为回调提供）时，作为thisArg传递的任何原始值都将转换为对象。如果bind函数的参数列表为空，或者thisArg为null或undefined，则执行范围内的this将被视为新函数的thisArg。arg1,arg2,...指定的参数可以有多个返回值：返回一个带有指定this值和初始参数的原始函数的副本。使用场景：//创建一个绑定函数//新手常犯的错误是从对象中取出一个方法然后调用它，期望方法中的this是原始对象this.a=100constobj={a:1,fn:function(){returnthis.a}}obj.fn()//Output1constf=obj.fn.bind(obj)f()//Output1//React组件中的函数绑定定义组件实例classFooextendsComponent{constructor(props){super(props);this.handleClick=this.handleClick.bind(this);}handleClick(){console.log('点击发生');}render(){return点击我;}}//部分函数实现functionadd(arg1,arg2){returnarg1+arg2}constaddBase10=add.bind(null,10)console.log(addBase10(100))//输出110console.log(addBase10(200))//输出210//类数组转换constunboundSlice=Array.prototype.sliceconstslice=Function.prototype.apply.bind(unboundSlice)functionargs(){returnslice(arguments)}args(1,2,3,4)//return[1,2,3,4]从上面的用法对比不难看出区别，call和apply都是主要是输入参数不同，都是返回指定this值和参数调用函数的结果（即立即调用）bind的输入和call一样，但是它的返回值和call和apply不一样，这是原始函数的副本，并且具有指定的this值和初始参数。要扩展使用js实现bind方法，首先需要将方法添加到函数原型中。该方法可以接受n个参数，其中第一个参数是调用该方法的函数的this指针，其他参数将作为调用函数的入参。Function.prototype.customBind=function(targetThis){//类型检查if(toString.call(this)!==='[objectFunction]'){thrownewError(`${this}mastbeaFunction`)}//savethisconst_this=this//保存参数（去掉第一个参数——this指向的参数是必需的）constargs=Array.prototype.slice.call(arguments,1)constfn=function(){//保存调用时传入参数constfnArgs=Array.prototype.slice.call(arguments)return_this.apply(targetThis,args.concat(fnArgs))}returnfn}functionfn(){console.log(this)//输出{a:10}console.log(this.a,arguments)//参数[1,2,3,4,5,6]}consto={a:10}fn.customBind(o,1,2,3)(4,5,6)