在JavaScript中,call、apply、bind是Function对象自带的三个方法。这三个方法的主要作用是改变函数中的this点。这也是这三个功能的共同点。call()语法:fun.call(thisArg,arg1,arg2,...)thisArg是fun函数运行时指定的this值。arg1,arg2,...是底层callfun方法传递的参数。如果第一个参数指定为null且undefined或者没有传值,那么这个值会自动指向全局对象(浏览器中的window对象)。如果第一个参数指定为数字、字符串或布尔类型,那么this将单独执行它们的包装对象functionfn(){console.log(this)}varobj={name:'张三'}functionshow(){}fn.call()//Windowfn.call(null)//Windowfn。call(undefined)//Windowfn.call(1)//Numberfn.call(false)//Booleanfn.call('Hey')//Stringfn.call(obj)//{name:"张三"}fn.call(show)//?show(){}举个简单的栗子来描述调用方法:functionAnimal(name){this.name=namethis.getName=function(){returnthis.name}}functionCat(name){this.name=name}varanimal=newAnimal('animal')varcat=newCat('cutecat')//console.log(cat.getName())//TypeError:cat.getNameisnotafunctionconsole.log(animal.getName.call(cat))//可爱的猫咪动物对象有一个getName方法。这个方法有一个this,这个this指向动物对象。但是我们可以通过call方法将this指向cat,此时输出的就是cat的名字。apply()语法:fun.apply(this,arguments)apply和call方法的功能和用法几乎相同,只是参数不同。arguments是一个数组函数fn1(a,b,c){this.getSum=function(){returna+b+c}}functionfn2(){vara=1varb=5varc=10fn1.apply(this,[a,b,c])}varf=newfn2()console.log(f.getSum())//16bind()bind、apply和call的区别在于bind返回对应的函数,方便稍后打电话;apply和call会立即被调用。注意:bind方法的返回值是一个函数。前端训练函数add(b,c){returnthis.a+b+c}varbind=add.bind({a:1},2)console.log(bind(3))//6第一个参数它是{a:1}所以,add函数的this指向对象{a:1}。第二个参数2赋值给b。这时候并没有立即指向add方法,而是返回到bind函数。我们必须主动调整bind函数来执行add函数。这时候在调用bind函数的时候,会把3的值赋值给c,所以最终返回的是6。其实了解了这三个函数的用法之后,想知道在实战中会用在什么地方,所以我搜索了各种信息。总结一些常用的场景。让a=[35,3,67,23,67,38,64,89,34,46,23,56,78,43,34,56,67,34,65]varmin=Math.min.apply(null,a)varmax=Math.max.apply(null,a)console.log(min,max)//3,89Math.min()和Math.max()的参数不支持数组,但是apply方法支持数组。而apply的数组参数会在底层的max方法中被一一展开,这样就可以轻松实现数组的最大值和最小值。其中,apply的第一个参数为null是因为没有对象调用这个方法,我们只需要使用这个方法来帮助我们完成计算并得到返回值即可。2.合并两个数组vararr1=[1,2,3]vararr2=['a','b','c']Array.prototype.push.apply(arr1,arr2)console.log(arr1)//[1,2,3,"a","b","c"]console.log(arr2)//["a","b","c"]Array的push方法同样没有提供push大批。但是它提供了push(param1,param,...paramN)所以你也可以通过apply转换这个数组3.InheritfunctionAnimal(name){this.name=namethis.getName=function(){returnthis.name}}Animal.prototype.age=18functionDog(name){Animal.call(this,name)//Animal.apply(this,[name])//Animal.bind(this,name)()}vardog=newDog('Puppy')console.log(dog.getName())//Dog构造函数没有getName方法,但是通过改变this的指向,Animal中的this指向Dog中的this,从而实现继承4。伪数组使用数组方法varlis=document.querySelector('ul').childNodesconsole.log(lis)//lis.slice(0,1)TypeError:lis.sliceisnotafunctionArray.prototype.slice。call(lis,0,1)getElementsByTagName、document.childNodes等方法返回的对象都是伪数组。伪数组不能使用数组方法,所以我们可以使用call将其转化为真正的数组,然后我们就可以使用数组方法了。
