1. 函数的call() / apply() / bind()
1. 区别call()/apply()/bind()
call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值
bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值
注意: 如果obj是null/undefined, this为window
2. 应用
call()/bind()应用: 根据伪数组生成真数组
bind(): react中组件的自定义方法 / vue中的事件回调函数内部
3. 自定义call()/apply()
1). 给obj添加一个临时方法, 方法名任意, 值为当前函数
2). 通过obj调用这个临时方法, 并将接收的参数传入
3). 删除obj上的这个临时方法属性
4. 自定义实现bind()
1). 返回一个新函数
2). 在新函数内部通过原函数对象的call方法来执行原函数
指定原函数的this为obj
指定参数为bind调用的参数和后面新函数调用的参数
2. 函数的节流(throttle)与防抖(debounce)
1. 事件频繁触发可能造成的问题?
1). 一些浏览器事件:window.onresize、window.mousemove等,触发的频率非常高,会造成浏览器性能问题
2). 如果向后台发送请求,频繁触发,对服务器造成不必要的压力
2. 如何限制事件处理函数频繁调用
1). 函数节流
2). 函数防抖
3. 函数节流(throttle)
1). 理解:
在函数需要频繁触发时: 函数执行一次后,只有大于设定的执行周期后才会执行第二次
适合多次事件按时间做平均分配触发
2). 场景:
窗口调整(resize)
页面滚动(scroll)
DOM 元素的拖拽功能实现(mousemove)
抢购疯狂点击(click)
4. 函数防抖(debounce)
1). 理解:
在函数需要频繁触发时: 在规定时间内,只让最后一次生效,前面的不生效。
适合多次事件一次响应的情况
2). 场景:
输入框实时搜索联想(keyup/input)
3. 数组声明式系列方法
1. 区别命令式与声明式
2. 使用数组声明式系列方法
1). map()
2). reduce()
3). filter()
4). find()
5). findIndex()
6). every()
7). some()
3. 自定义数组声明式系列方法