JS基础 :重写API

502 阅读2分钟

playground

Apply

  • 获取到当前调用方法体
  • 获取方法的入参
  • 绑定方法体中的上下文为传入的context--使用的方法就是对象调用属性方法的方式绑定
  • 调用方法

call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。

call和 apply之间的差别在于参数的区别,call和apply的第一个参数都是要改变上下文的对象,而call从第二个参数开始以参数列表的形式展现,apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。

console.log(Math.max.call(null, 1,2,19,6)); // 19
console.log(Math.max.apply(null, [1,2,19,6])); // 19

bind实现函数

  • 获取调用bind的实例方法体
  • 获取需要绑定的上下文context
  • 声明闭包函数
  • 闭包函数中绑定context到实例方法体中
  • 闭包函数中调用原来的方法体
  • 返回闭包函数

debounce

debounce:函数防抖不是完成某个事件就去执行某函数,而是在某个间隔时间内只执行一次,避免函数的过多执行 @params: func:需要执行的函数 wait:设置的间隔时间 immediate:设置为ture时,调用触发于开始边界而不是结束边界 @return: 返回可被调用的函数 Throttle Throttle throttle:函数节流是为了缩减执行频率,当达到了一定的时间间隔就会执行一次

二者的区别

debounce(func, wait, options):创建并返回函数的防反跳版本,将延迟函数的执行(真正的执行)在函数最后一次调用时刻的wait毫秒之后,对于必须在一些输入(多是一些用户操作)停止之后再执行的行为有帮助。将一个连续的调用归为一个,如果连续在wait毫秒内调用,最后只有最后一次会执行 throttle(func, wait, options):创建并返回一个像节流阀一样的函数,当重复调用函数的时候,最多每隔指定的wait毫秒调用一次该函数;不允许方法在每wait毫秒间执行超过一次,如果连续在wait毫秒内调用,最后执行会均匀分布在大约每wait一次

###参考文章

let throttle = function (func, wait) {
    let timeout = null,
        result = null,
        previous = 0; //=>上次执行时间点
    return function (...args) {
        let now = new Date,
            context = this;
        //=>remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间间隔
        let remaining = wait - (now - previous);
        if (remaining <= 0) {
            clearTimeout(timeout);
            previous = now;
            timeout = null;
            result = func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(() => {
                previous = new Date;
                timeout = null;
                result = func.apply(context, args);
            }, remaining);
        }
        return result;
    };
};\