您的位置 首页 技术

js中call、apply和bind的区别和原理及扩展的高级运用

前言 在面试的过程中,会有许多新问题出现来让你拓展新的知识,也会发现学习中忽略的点。 在前两天的一次面试中,面试官就问了call、apply和bind的区别。事实上,我们也应该领悟…

前言

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

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


call

call是所有函数都能调用的方法,是Function.prototype里的方法

作用

  1. 调用函数

  2. 改变this,作为第一个参数

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

案例

function fn1(){    console.log(1);}function fn2(){    console.log(2);}fn1.call(fn2); //输出 1fn1.call.call(fn2); //输出 2

解析:第一行输出,调用了fn1并将this指向fn2第二行输出,事实上,执行的call()才是关键,这里就涉及了Function.prototype.call()的机制,它只是把.call()之前的代码段当作一个变量,将传递的代码段指向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. 传递参数,第二个参数之后的所有个数参数

  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的区别和原理及扩展的高级运用的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/92162.html

为您推荐

返回顶部