本文摘自PHP中文网,作者hzc,侵删。
前言在面试的过程中,会有许多新问题出现来让你拓展新的知识,也会发现学习中忽略的点。
在前两天的一次面试中,面试官就问了call、apply和bind的区别。事实上,我们也应该领悟得到面试官更想问到的东西是什么,也就是拓展出来的东西。
call
call是所有函数都能调用的方法,是Function.prototype
里的方法
作用
调用函数
改变this,作为第一个参数
传递参数,第二个参数之后的所有个数的参数
案例
1 2 3 4 5 6 7 8 |
|
解析:
第一行输出,调用了fn1
并将this
指向fn2
第二行输出,事实上,执行的call()
才是关键,这里就涉及了Function.prototype.call()
的机制,它只是把.call()
之前的代码段当作一个变量,将传递的代码段指向this
,则fn1.call指向了fn2
,于是就相对于fn2.call()
,只是这里传递的this
为window
运用
继承的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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函数获取最大值
1
2
3
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的区别
与前两者的最大不同就是不会调用函数并且修改后返回新的函数
运用
1 2 3 4 5 6 7 8 9 |
|
上面的案例修改了定时器的this
,同时不会调用函数。但事实上如果你用了箭头函数的写法,因箭头函数的this
是关乎上下文的this
,因此会简单许多,这个案例意在给我们理解bind
的用法,那么在下面附上箭头函数的写法
1 2 3 4 5 6 7 8 9 |
|
推荐教程:《JS教程》
以上就是js中call、apply和bind的区别和原理及扩展的高级运用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
js中call、apply和bind的区别和原理及扩展的高级运用
更多相关阅读请进入《call》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者