这是我参与「第五届青训营」伴学笔记创作活动的第14天

以下是对今天所学习的JS工具类进行封装过程中所做的笔记

1.call()、apply()、bind()

1.call()

 fuction call(Fn方法,obj被指定对象,...args多个参数){
     //空对象判断
     if(obj === undefined || obj === null){
         obj = globalThis; //指定为全局对象
     }
     //为obj添加临时方法
     obj.tempFn = Fn;
     //使用obj调用，此时就完成了this指向改变
     let result = obj.tempFn(...args);
     //删除obj的临时方法
     delete obj.tempFn;
     //返回调用结果（使用obj调用的结果）
     return result;
 }

总结：将要指定的对象临时添加this的方法并进行调用,简言之this始终没有改变，只是指定对象临时调用了this的方法。

 <script>
     //声明一个函数
     function add(a,b){
         console.log(this);
         return a + b + this.c;
     }
     //声明一个对象
     let obj = {c: 521}
     //添加全局属性
     window.c = 1314;
     //执行 cal1 函数
     console.log(call(add, obj, 10， 20));
     console.log(call(add，nul1, 30，40));
 </script>

2.apply()

 fuction apply(Fn方法,obj被指定对象,args数组参数){
     //空对象判断
     if(obj === undefined || obj === null){
         obj = globalThis; //指定为全局对象
     }
     //为obj添加临时方法
     obj.tempFn = Fn;
     //使用obj调用，此时就完成了this指向改变
     let result = obj.tempFn(...args);
     //删除obj的临时方法
     delete obj.tempFn;
     //返回调用结果（使用obj调用的结果）
     return result;
 }

与call()的区别在与传参不一样，apply()使用数组传参只能传一个

3.bind()

 function bind(Fn, obj....args)(//返回一个新的函数
     return function(...args2){//执行 cal1 函数
         return call(Fn, obj,...args, ...args2);
     }
 }

与call类似但是调用的方式不同,返回的函数调用时输入参数（...args2）要放在后面

 <script>
     //声明一个函数
     function add(a,b){
         console.log(this);
         return a + b + this.c;
     }
     //声明一个对象
     let obj = {
         c: 521
     }
     //添加全局属性
     window.c = 1314;
     //执行 函数
     let fn = bind(add, obj, 1, 2);
     console.log(fn());
     let fn2 = bind(add, obj);console.log(fn2(1，2a));
 </script>

2.函数节流与函数防抖

1.函数节流

作用：控制函数调用的频率

场景：

窗口调整 (resize)
页面滚动 (scroll)
DOM 元素的拖拽功能实现 (mousemove)
抢购疯狂点击 (click)

 function throttle(callback, wait){
     //定义开始时间
     let start = 0;
     //返回结果是一个函数return function(e)(//获取当前的时间戳
     let now = Date.now();
     //判断
     if(now - start >= wait){
         //若满足条件，则执行回调函数
         callback.call(this, e);
         //修改开始时间
         start = now;
     }
 }

使用节流函数

 <script>
     //绑定滚动事件
     // window.addEventListener('scroll, function(){
     //      console.log(Date.now());
     // });
     window.addEventListener('scroll'，throttle(function(){console.log(Date.now());
     1, 500));
 </script>

2.函数防抖

 function debounce(callback, time){
     //定时器变量
     let timeId = null;
     //返回一个函数
     return function(e){
         //判断
         if(timeId !== null){
             //清空定时器
             clearTimeout(timeId);
         }
      //启动定时器
      timeId = setTimeout(() => {
         //执行回调
         callback.cal1(this, e);
         //重置定时器变量
         timeId = null;
     },time);
     }
 }

规定时间内再次执行同一函数的话，只有最后一次会被执行，在规定时间内再次调用定时器会被清除（重启定时器）

3.数组API(Array)

1.map()

数组遍历回调

map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回

map只进行回调不讨论真假

 function map(arr, callback){
     //声明一个空的数组
     let result = [];
     //遍历数组
     for(let i=@;i<arr.length;i++){
         //执行回调
         result.push(callback(arr[i]， i));
     }
     //返回结果
     return result;
 }

map的作用：遍历所有元素逐一进行处理，而后返回一个新的数组

2. reduce()

数组遍历回调

reduce0: 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值

 function reduce(arr, callback，initValue){
     //声明变量
     let result = initValue;
     //执行回调
     for(let i=@;i<arr.length;i++){
         //初始值未赋值时将第一个元素赋值给result
         if(result === undefined)
         {result = arr[i]; continue;}
         //执行回调
         result = callback(result, arr[i]);
     }
     return result;
 }

reduce作用：从左到右依次回调，回调结果会保存到下一次回调中

JS工具类学习｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第14天