函数的使用

函数绑定

fn.call(obj, param1, param2)
fn.apply(obj, [param1, param2])
fn.bind(obj, param1, param2)()相同点：
都是借用别人（fn）的方法，替换其中的this（第一个参数）call和apply的不同点：apply以数组形式传参、call以多个参数形式传参
call和apply的相同点：都是立即执行，不用再次调用call、apply和bind的不同点：bind返回一个函数，还需要再调用一下

回调函数

let getMsg = (msg, format) => {if(msg){return format(msg)}
}let ss = getMsg('我们是中国人', (msg) => {return msg.slice(0, 2)
})
console.log(ss)    //我们定义外部函数getMsg时，回调函数作为参数传递，并在函数体里调用
调用外部函数时，定义回调函数 msg => {return msg.slice(0, 2)}

箭头函数

// 如果简写的箭头函数return的是一个对象，这个对象要用括号括起来（语法上的要求）
x => ({key: x})

高阶函数应用

• AOP切片编程

// 我们不希望如下,在原有的goschool中加吃饭功能
function goschool(){console.log("吃饭");console.log("上学");
}
// 而是不修改原有功能，去添加新的功能
function eat() {console.log("吃饭");
}
function goschool() {console.log("上学");
}
Function.prototype.before = function (cb) {return () => {cb();this();};
};
const someFn = goschool.before(eat);
someFn();//吃饭，上学

• 函数参数复用

function getTargetStr(region, repoffice) {return '大屏' + region + repoffice
}
console.log(getTargetStr('中国', '深圳'))
console.log(getTargetStr('中国', '上海'))// 第一个参数都是中国，那么这个参数是可以复用的，如下
function getTargetStr(region) {return function(repoffice){return '大屏' + region + repoffice}
}
const chinaRegion = getTargetStr('中国')
console.log(chinaRegion('深圳'))
console.log(chinaRegion('上海'))

• 将嵌套执行的函数平铺

function multiply(x) {return x * 5;
}
function add(x) {return x + 3;
}
// 嵌套执行就是一个函数的返回值作为另一个函数的参数
const value = multiply(add(2));// 管道函数实现
function pipe(...fns) {return function (data) {return fns.reduce((acc, itemFn) => {return itemFn(acc);}, data);};
}
const value = pipe(add, multiply)(2);

• 防抖

function debounce(fn, delay) {let timer = null;return function (...args) {const firstClick = !timer;// 防抖if (timer) {clearTimeout(timer);}// 第一次立即执行操作if (firstClick) {// debounce函数renturn出来的函数为任务函数// 其this指向被绑定的dom，同时帮任务函数的参数传进来fn.apply(this, args);}timer = setTimeout(() => {// 在delay时间到了之后timer变为null，之前不为nulltimer = null;}, delay);};
}
function handler(e) {console.log(this);// 元素console.log(e);//事件对象
}
const dom = document.getElementById("box");
dom.addEventListener("click", debounce(handler, 2000));

• 节流

function throttle(fn, delay) {let begin = 0;return function (...args) {let cur = new Date().getTime();if (cur - begin > delay) {fn.apply(this, args);begin = cur;}};
}
dom.addEventListener("click",throttle(function (e) {console.log("this", this); // 元素console.log("e", e); //事件对象}, 2000)
);