一个合格的中级前端工程师必须要掌握的28个JavaScript技巧(2)

使用方法：

通过占位符能让柯里化更加灵活，实现思路是，每一轮传入的参数先去填充上一轮的占位符，如果当前轮参数含有占位符，则放到内部保存的数组末尾，当前轮的元素不会去填充当前轮参数的占位符，只会填充之前传入的占位符

12. 偏函数

使用方法：

偏函数和柯里化概念类似，个人认为它们区别在于偏函数会固定你传入的几个参数，再一次性接受剩下的参数，而函数柯里化会根据你传入参数不停的返回函数，直到参数个数满足被柯里化前函数的参数个数

Function.prototype.bind 函数就是一个偏函数的典型代表，它接受的第二个参数开始，为预先添加到绑定函数的参数列表中的参数，与 bind 不同的是，上面的这个函数同样支持占位符

13. 斐波那契数列及其优化

利用函数记忆，将之前运算过的结果保存下来，对于频繁依赖之前结果的计算能够节省大量的时间，例如斐波那契数列，缺点就是闭包中的 obj 对象会额外占用内存

14. 实现函数 bind 方法

函数的 bind 方法核心是利用 call，同时考虑了一些其他情况，例如

bind 返回的函数被 new 调用作为构造函数时，绑定的值会失效并且改为 new 指定的对象

定义了绑定后函数的 length 属性和 name 属性(不可枚举属性)

绑定后函数的原型需指向原来的函数

15. 实现函数 call 方法

原理就是将函数作为传入的上下文参数(context)的属性执行，这里为了防止属性冲突使用了 ES6 的 Symbol 类型

16. 简易的 CO 模块

使用方法：

run 函数接受一个生成器函数，每当 run 函数包裹的生成器函数遇到 yield 关键字就会停止，当 yield 后面的 promise 被解析成功后会自动调用 next 方法执行到下个 yield 关键字处，最终就会形成每当一个 promise 被解析成功就会解析下个 promise，当全部解析成功后打印所有解析的结果，衍变为现在用的最多的 async/await 语法

17. 函数防抖

leading 为是否在进入时立即执行一次， trailing 为是否在事件触发结束后额外再触发一次，原理是利用定时器，如果在规定时间内再次触发事件会将上次的定时器清除，即不会执行函数并重新设置一个新的定时器，直到超过规定时间自动触发定时器中的函数

同时通过闭包向外暴露了一个 cancel 函数，使得外部能直接清除内部的计数器

18. 函数节流

和函数防抖类似，区别在于内部额外使用了时间戳作为判断，在一段时间内没有触发事件才允许下次事件触发

19. 图片懒加载

getBoundClientRect 的实现方式，监听 scroll 事件(建议给监听事件添加节流)，图片加载完会从 img 标签组成的 DOM 列表中删除，最后所有的图片加载完毕后需要解绑监听事件

intersectionObserver 的实现方式，实例化一个 IntersectionObserver ，并使其观察所有 img 标签

当 img 标签进入可视区域时会执行实例化时的回调，同时给回调传入一个 entries 参数，保存着实例观察的所有元素的一些状态，比如每个元素的边界信息，当前元素对应的 DOM 节点，当前元素进入可视区域的比率，每当一个元素进入可视区域，将真正的图片赋值给当前 img 标签，同时解除对其的观察

（编辑：ASP站长网）