在js中call、apply和bind之间有什么区别-创新互联
创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
成都创新互联专注于桦甸企业网站建设,响应式网站建设,电子商务商城网站建设。桦甸网站建设公司,为桦甸等地区提供建站服务。全流程定制网站开发,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务本篇文章给大家分享的是有关在js中call、apply和bind之间有什么区别,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
前言
在面试的过程中,会有许多新问题出现来让你拓展新的知识,也会发现学习中忽略的点。
在前两天的一次面试中,面试官就问了call、apply和bind的区别。事实上,我们也应该领悟得到面试官更想问到的东西是什么,也就是拓展出来的东西。
call
call是所有函数都能调用的方法,是Function.prototype
里的方法
作用
调用函数
改变this,作为第一个参数
传递参数,第二个参数之后的所有个数的参数
案例
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()
,只是这里传递的this
为window
运用
继承的方法
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
里的方法
作用
调用函数
改变this
传递参数,第二个参数之后的所有数组参数
与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
里的方法
作用
改变this
传递参数,第二个参数之后的所有个数参数
返回新函数
与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之间有什么区别,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联-成都网站建设公司行业资讯频道。
分享标题:在js中call、apply和bind之间有什么区别-创新互联
URL地址:http://cdiso.cn/article/jiogc.html