全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[seo公司效果]js中call、apply和bind的区别和原理及扩展的高级运用

  前言

  在面试的过程中,会有许多新问题出现来让你拓展新的知识△◇,也会发现学习中忽略的点△•★。

  在前两天的一次面试中,面试官就问了call▲▲、apply和bind的区别-☆•。事实上,我们也应该领悟得到面试官更想问到的东西是什么,也就是拓展出来的东西。

  


 

  call

  call是所有函数都能调用的方法▼▲○,[seo公司效果]Function☆■.prototype里的方法

  作用

  

  1.  

      调用函数

      

  2.  

      改变this▪☆,作为第一个参数

      

  3.  

      传递参数○…▪△,第二个参数之后的所有个数的参数

      

 

  案例

  

function fn1(){
 console○•▪☆.log(1);
}
function fn2(){
 console.log(2)▲-▷•;
}
fn1.call(fn2); //输出 1
fn1.call●○▽○.call(fn2)○…☆▼; //输出 2

 

  解析
第一行输出,调用了fn1并将this指向fn2
第二行输出,事实上,执行的call()才是关键=◆,这里就涉及了Function.prototype.call()的机制,它只是把.call()之前的代码段当作一个变量,H5教程将传递的代码段指向this■■,则fn1◇◇.call指向了fn2,于是就相对于fn2.call()○□,只是这里传递的thiswindow

  运用

  

  •  

      继承的方法

      

     function Father(uname,age){
     this.uname= uname;
     this◆•.age=age•…★◆;
     }
     Father.prototype={
     constructor:Father,
     sing:function(){
     console.log("唱跳rap");
     }
     }
     function Son(){
     Father.call(this,uname=…,age)
     }
     Son★▽….prototype=new Father();

 

  apply

  apply同样也是所有函数都能调用的方法△▷,是Function◁★.prototype里的方法

  作用

  

  1.  

      调用函数

      

  2.  

      改变this

      

  3.  

      传递参数,第二个参数之后的所有数组参数

      

 

  与call的区别

  apply第二个参数是Array■▽,而call是将参数以个数的形式传入

  运用

  

  •  

      运用Math函数获取最大值

      

     let arr=Array△•=.of(2,42,56,89,1▷-,24,56,22)
     let max=Math.max.apply(Math,arr)
     console.log(max)◇-;

 

  bind

  bind同样也是所有函数都能调用的方法,是Function▼◁▽.prototype里的方法

  作用

  

  1.  

      改变this

      

  2.  

      传递参数,[厦门seo优化公司排名]oracle怎么修改数据库密码,第二个参数之后的所有个数参数

      

  3.  

      返回新函数

      

 

  与call、apply的区别

  与前两者的最大不同就是不会调用函数并且修改后返回新的函数

  运用

  

let btns=document.querySelectorAll("button")
for(let btn of btns){
 btn.onclick=function(){
 this□◆△.disabled=true;
 setTimeout(function(){
 this.disabled=false;
 }.bind(this),2000)••○;
 }
}

 

  上面的案例修改了定时器的this,同时不会调用函数。但事实上如果你用了箭头函数的写法,前端技术有哪些因箭头函数的this是关乎上下文的this,因此会简单许多,这个案例意在给我们理解bind的用法◇•,那么在下面附上箭头函数的写法

  

let btns=document.querySelectorAll("button")
for(let btn of btns){
 btn.onclick=function(){
 this▷▼.disabled=true;
 setTimeout(()=>{
 this.disabled=false;
 },2000)○…◁◇;
 }
}

 

  推荐教程▷★★:《JS教程》

  以上就是js中call、apply和bind的区别和原理及扩展的高级运用的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[seo公司效果]js中call、apply和bind的区别和原理及扩展的高级运用

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。