hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 前端开发 - 正文 君子好学,自强不息!

js中call、apply和bind的区别和原理及扩展的高级运用_WEB前端开发

2020-07-05前端开发ki4网7°c
A+ A-

html5不常用标签可以怎么使用?_WEB前端开发

作为一个前端开发,在浏览别人家的页面时总是会习惯性的查看他们页面的源码,发现大多数网站的页面中用到的最多的布局元素无外乎就是div、p、span、ul、dl、ol、li、dt、dd、strong、b,不管是什么样的效果都是由这些元素组成。

前言

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

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

call

call是所有函数都能调用的方法,是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()之前的代码段当作一个变量,将传递的代码段指向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. 调用函数

    css如何实现模糊背景效果_WEB前端开发

    css实现模糊背景效果的方法:在父容器中设置背景,并且使用相对定位。而在:after中只需要继承背景,并且设置模糊,绝对定位覆盖父元素即可。这样父容器中的子元素就可以不受模糊程度影响。

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

了解css中的关键字initial、inherit、unset、revert和all属性_WEB前端开发

在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始)、inherit(继承)、unset(未设置)、revert(还原)。而all的取值只能是以上这4个关键字。本文将介绍initial、inherit、un

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
js中call、apply和bind的区别和原理及扩展的高级运用_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>