9--12例子

2020-10-31

9、Function.prototype.call()

于apply唯一不同的是，call()方法接受的是一个参数列表

Function.prototype.call = function(context = window, ...args) {
    if (typeof this !== 'function') {
        throw new TypeError('Type Error');
    }
    //ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名
    const fn = Symbol('fn');
    context[fn] = this;

    const res = context[fn](...args);
    delete context[fn];
    return res;
}

10、Function.prototype.bind

Function.prototype.bind = function (context, ...args) {
    if (typeof this !== 'function') {
        throw new Error('Type Error');
    }
    //保存this的值
    var self = this;

    return function F() {
        //考虑new的情况
        if(this instanceof F) {
            return new self(...args, ...arguments);
        }
        return self.apply(context, [...args, ...arguments]);
    }
}

11、debounce（防抖）

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

const debounce = (fn, time) => {
    let timeout = null;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, time);
    }
};

防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

12、throttle（节流）

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。
当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

const throttle = (fn, time) => {
    let flag = true;
    return function () {
        if(!flag) {
            return ;
        }
        flag = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            flag = true;
        }, time);
    }
}

节流常应用于鼠标不断点击触发、监听滚动事件。