关于apply,箭头函数问题
来源：2-1 搜索框组件
慕前端5592812
2019-11-20 16:07:37
// 函数节流
export const debounce = (func, delay = 200) => {
let timer = null;
return function (...args) {
timer && clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
};
watch:{
query:debounce(function() {
this.$emit('query', this.query);
})
}
//这两部分函数是怎么执行的有点蒙
1.debounce执行返回function (...args)
2.func === function() {his.$emit('query', this.query);}
问题一：返回的function (...args)函数，它是如何执行的，好像没有调用？
问题二：func.apply(this, args);问答区里说this执行search-box为啥？
问题三：agrs传入的实际是哪个数组？
2回答
-
Raznov
2020-03-14
对于问题3，其实这里的...args用到了剩余参数语法（rest），意思是在函数传入的所有参数中，除了...之前的参数，其他参数都push到名为args的数组中。可以参考MDN的介绍https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters
但是在实际调用中，由于
watch: { query: debounce(function () { this.$emit('query', this.query) }) },没有传入参数（即function后面的括号没有参数），所以这里的args是个空数组。
如果把它改为
watch: { query: debounce(function (newData, oldData) { this.$emit('query', this.query) console.log('newData：', newData) console.log('oldData：', oldData) }) },那么就是rgs=[newData, oldData]了。
0 -
bbbboom
2019-11-20
1、不是直接调用的，是间接调用的。func.apply(this, args);这一步调用了，func就是传递的这个参数，就是这个函数，这一步调用的。然后最终拿到的返回值是执行完这个函数得到的值。
2、计时器是没有this的，执行的是调用query这个事件的元素，就是search-box了。
3、agrs传入的就是在搜索框里面输入的内容。
0
相似问题