js call() apply() 防抖函数 节流函数

一、call() 和 apply() 作用和原理

call()作用：通过调用call()将函数的this指向改变成指定的对象并执行

                   如：fn1.call(newObj，params1,params2),此时fn1函数中的this指的是newObj，                     并且fn1函数被执行。params1和param2指fn1函数的参数。

apply()和call()的区别：params传参方式不同

                                     call(newObj , param1 , param2)将参数分开为单个变量传

                                     apply(newObj , [param1,param2])将参数放置到一个数组对象中传。

call()原理：将待执行函数添加到期望this指向的新对象上，再执行，此时执行的函数的this就是用户期望的this指向的对象，最后将函数返回值获取并原样返回。

Function.protorype.MyCall = function(obj){
    if(typeof this!=='function'){
        return false    //首先判断当前调用MyCall()的是不是函数
    }
    var newObj = obj || window    //判断obj是否存在，存在则使用obj,不存在则默认使用window
    newObj.fn = this    //this指的是待执行的函数，即期望改变this指向的函数
    var params = [...argument].slice(1)    //argument指MyCall函数接收到的参数集合，去除第一个this对象
    var result = newObj.fn(...params)    //执行放入新对象中的待执行函数并获取返回值
    delete newObj.fn    //删除新对象中新创建的临时函数
    return result    //返回新对象环境下执行的函数返回值
}

var x=0
function testFun(){
    console.log(this.x)
}

testFun()    //输出0
testFun.MyCall({x:1})    //输出1

二、防抖函数、节流函数作用和原理

1. 防抖函数（闭包的应用）

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

应用场景1：input输入框的input事件会在输入框内容发生改变的时候执行，那么就存在一个问题：每次输入，都会触发input事件，执行函数，或者接口请求，而这并不是我们想要的：比如，你想要模糊查询 "liu" 相关的所有数据，而当你在input框中输入 "l" 的时候就已经触发了input事件，去请求了接口，而这并不是我们想要的。所以，我们的防抖函数就登场了；

   function debounce(method, delay) {
        var timer = null;
        return function () {
            let self = this;    //this指原method的调用者
            timer && clearTimeout(timer);
            timer = setTimeout(function () {
                //setTimeout中非箭头函数调用者为window,但原method调用者可能不是window,所有需要保持原来的this指向
                method.apply(self, arguments);  //arguments指当前return这个函数接收的参数，该参数原本就是需要传给method的  
            }, delay)
        }
    }

function inputChange() {
    console.log('输入框value改变');
}
$('#inputId').keyup(debounce(inputChange, 500));

 

     2.节流函数（闭包的应用）

作用 ：当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

应用场景1：当用户重复点击保存按钮时，使用节流函数保证一段时间内只执行一次保存操作，避免多少执行保存操作导致性能和用户体验降低。

//定时器方式实现
var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function submitFun() {
    console.log('提交操作');
}
$('#submit').click(throttle(submitFun, 1000));

//时间戳方式实现
var throttle = function(func, delay) {
    var prev = Date.now();
    return function() {
        var context = this;   //this指向该func的调用者，此处是$('#submit')
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    }
}
function submitFun() {
    console.log('提交操作');
}
$('#submit').click(throttle(submitFun, 1000));