// 获取button按钮元素 const btn = document.querySelector("button"); // 定义付款操作函数 function payMoney() { console.log("付款成功"); } // 定义防抖函数 // func: 点击按钮要执行的函数 // delay: 防抖时间 function debounce(func, delay) { // 设置定时器标识 let timer; // 难点返回事件绑定函数 //在这里arguments是func delay return function() { // func指定this let context = this; // func参数 //在这里arguments是addEventListener所决定的event let args = arguments; // 先清除定时器 clearTimeout(timer); //设置定时器 timer = setTimeout(() => { // 调用函数 //在这里通过apply args来把此时的event传递给函数func。apply在这里不仅仅只是能够把作为数组参数,也可以把arguments作为参数,因为在apply源码可以看出arguments[1]得到apply传过的参数,list[0]可以得到参数里的数据,这个使用对象的除了obj.pro这种取属性方法外第二种obj["pro"]方式可以取得数据。 func.apply(context,args); }, delay); } } // 绑定点击事件 btn.addEventListener("click", debounce(payMoney, 1000))
function debounce(func, delay) { // 设置定时器标识 let timer; // 难点返回事件绑定函数 //或者用...args这种方式把传过来的event包裹起来,args成为了[event]。这样再把他传给下面的apply,或者还可以直接写args 再把apply改为call,把args传给call。 return function(...args) { // func指定this let context = this; // 先清除定时器 clearTimeout(timer); //设置定时器 timer = setTimeout(() => { // 调用函数 func.apply(context,args); }, delay); } }
Function.prototype.apply=function(x){
x = x || {};//防止this为null
x['fn'] = this;
var list = arguments[1] || [];
var args = '';//参数列表
var type;
for (var i = 0; i<list.length;i++) {
if (typeof list[i] === 'string') {//参数是字符串,需要在两边加引号,因为在拼接参数的时候会被丢掉
type = '"'+list[i] + '"';
}
else if (typeof list[i] === 'function') {//参数是函数的话,"反编译"出函数的代码
type = list[i].toString();
}
else if (typeof list[i] === 'object' ) {
if (/function Array()/.test(list[i]['constructor'])) {//参数是数组则在数组两边加上[,]
type = "[" + list[i] + "]";
} else {
type = JSON.stringify(list[i])//对象的话,json化,然后执行的时候反json化
}
} else {
type = list[i];//数字类型
}
args = args + type +',';
}
args = args.slice(0,args.length-1);//去掉最后的逗号
var q = new Function('var x = arguments[0];x.fn('+args+')')//new Function的时候作用域是独立的,无法访问call里面的x,所以需要传进去
q(x)
}
function parse_Array_Object(arg) {
//可以npm install traverse-deep和结合js的map函数进行相应处理,主要是遍历arg的每一个元素,进行类型判断,然后返回相应的字符串
//to do ..
}
function a(a){
console.log(this,arguments)
}
a.apply(null,[1,2])