在js中call、apply和bind之间有什么区别

发布时间:2020-07-09 14:25:31 作者:Leah
来源:亿速云 阅读:205

本篇文章给大家分享的是有关在js中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); //输出 1
fn1.call.call(fn2); //输出 2

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

运用

apply

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

作用

  1. 调用函数

  2. 改变this

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

与call的区别

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

运用

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中call、apply和bind之间有什么区别,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

推荐阅读:
  1. js中的bind、call、apply
  2. apply call bind的区别

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

call apply bind

上一篇:74react_todolist2

下一篇:Astrill与VS2015共存

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》