windows 改变文件大小函数_手写 bind call apply 方法与实现节流防抖函数

实现 bind call apply 方法

this 是什么？

this是指包含它的函数作为方法被调用时所属的对象。这句话理解起来感觉还是很拗口的，但是如果你把它拆分开来变成这三句话后就好理解一点了。

包含它的函数
作为方法被调用时
所属的对象

改变 this 指向的函数

bind、call、apply

共同点
目标函数被调用时，改变 this 的指向为指定的值
三个方法都是函数的方法，挂载在 Funtion.prototype 上
不同点
目标函数调用 call 和 apply 后会直接被执行。
目标函数调用 bind 后，不会立即执行，而是返回一个新的函数，调用新函数才会执行目标函数。

回顾 call apply bind 的使用

var btn = document.querySelector(".btn");
var name = "windows";
var obj = {name: "Linux",num: 0,updateNum: function(){this.num++;console.log(this.num) // 1,2,3,4}
}function fn(){console.log(this.name);
};btn.addEventListener("click", obj.updateNum.bind(obj))fn();           // windows
fn.call(obj);   // Linux
fn.apply(obj)
fn(null);       // windows

回顾call与apply的参数使用

let name = "wanna";let age = 20;let obj = {name: "hurt",objAge: this.age,objFn: function(a, b){console.log(this.name + "年龄" + this.age, "性别:" + a + "兴趣爱好" + b);}};let user = {name: "hico",age: 18};obj.objFn.call(user, "男", "篮球");             // hico年龄18 性别:男 兴趣爱好篮球obj.objFn.apply(user, ["男","足球"]);           // hico年龄18 性别:男 兴趣爱好足球obj.objFn.bind(user, "男", "排球")();           // hico年龄18 性别:男 兴趣爱好排球obj.objFn.bind(user, ["男", "乒乓球"])(null);   // hico年龄18 性别:男 乒乓球 兴趣爱好null

不同的是 bind 必须调用它才会执行

实现 call

思路

call是可以被所有方法调用的,所以毫无疑问的定义在 Function的原型上
绑定函数被调用时只传入第二个参数及之后的参数
如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。

Function.prototype.MyCall = function(){const ctx = arguments[0] || window;// 被调用的方法定义在 ctx.fn 绑定 thisctx.fn = this;// 获取实参const arg = [...arguments].slice(1); // 以对象调用的形式调用 fn ，此时的 this 指向 ctx，也就是传入的需要绑定 this 指向const res = arguments.length > 1 ? ctx.fn(...arg) : ctx.fn();// 删除方法，防止对传入的对象造成污染delete ctx.fn;return res;
};

实现 apply

apply实现的思路与call基本相同,我们只需要对参数进行不同处理即可

Function.prototype.MyApply = function(){const ctx = arguments[0] || window;// 被调用的方法定义在 ctx.fn 绑定 thisctx.fn = this;// 以对象调用的形式调用 fn ，此时的 this 指向 ctx，也就是传入的需要绑定 this 指向const res = arguments[1] ? ctx.fn(...arguments[1]) : ctx.fn();// 删除方法，防止对传入的对象造成污染delete ctx.fn;return res;
};

实现 bind

思路

call是可以被所有方法调用的,所以毫无疑问的定义在 Function的原型上
绑定函数被调用时只传入第二个参数及之后的参数
如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。
调用执行，不调用绑定 this 指向

Function.prototype.MYBind = function(context){// 深拷贝 防止污染const ctx = JSON.parse(JSON.stringify(context)) || window;// 被调用的方法定义在 ctx.fn 绑定 thisctx.fn = this;// 获取实参const args = [...arguments].slice(1);// 返回一个绑定函数，等待调用return function () {// 合并实参const allArgs = args.concat([...arguments]);// 以对象调用的形式调用 fn ，此时的 this 指向 ctx，也就是传入的需要绑定 this 指向return allArgs.length ? ctx.fn(...allArgs) : ctx.fn();}};

什么是节流？怎么实现节流函数

我们举例一个简单的 demo ，假设我们在页面用到了滚轮事件

window.addEventListener("scroll",()=>console.log("1"))

我现在打算从页面滚动一次

于是我们会发现

轻轻的一滚动执行了 16 次打印，这个函数的默认执行频率太高了，但是实际上我们并不需要如果高频的执行，毕竟浏览器的性能是有限的，不应该在这里浪费，接下来我们来看看如何优化这种场景。

如果在限定时间段内，不断触发滚动事件。好比我们假设上了一趟公共厕所，发现水龙头的水大量的喷出，于是我们下意识的拧紧关闭水龙头，却拧不紧，即使拧不紧也要节约一下用水，让水龙头的水量变小，节约用水，人人有责嘛，好了，废话不多说，直接上代码

let getLog = () => console.log("滚动");
window.addEventListener("scroll", throttle(getLog, 300));
// 节流
function throttle(fn, interval=300){let timer = 0;return function(...arg) {let _this = this;if(timer)return;fn.call(_this, ...arg);timer = setTimeout(function(){timer = 0;},interval);};
};

也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却）

开始从顶部滚动，这下狠一点，滚到底部看看效果。

于是我们发现

滚到底部居然只打印了11次，坑比我们上面的滚动一次打印 15 次，大大节省了性能的消耗。

什么是防抖？怎么实现防抖函数

举例一个简单的 demo，现在我打算窗口大小发生改变时打印日志

let getLog = () => console.log("防抖");
window.addEventListener("scroll",getLog)

我打算从左边拉动到右边

小小改变窗口大小就发生了这样的事

其实实际上我们并不需要如果高频的执行，毕竟浏览器的性能是有限的，不应该在这里浪费，我们来整理一下思路。

在第一次触发事件后，不应该立即执行函数，而是给出一个期限值比如 500ms 。

如果 500ms 内没有再次触发滚动，那么就执行函数。
如果 500ms 内再次触发滚动事件，那么当前的计时取消，重新开始计时。

效果：短时间内大量触发同一事件，只会执行最后一次

实现：既然前面都提到了计时了，那实现的关键就在于 setTimeOut 这个函数了。

let getLog = () => console.log("防抖");window.addEventListener("resize", debounce(getLog));// fn 要防抖的函数 interval 间隔时间
function debounce(fn, interval=500){let timer = 0;return function(...arg) {let _this = this;clearTimeout(timer);timer = setTimeout(function(){fn.call(_this, ...arg);},interval);}
}

现在我打算窗口从右边拖到到左边。

天呐，控制台居然只输出了一次日志，不管我怎么拉动，当我停下来的时候就执行了最后一次

这下我们明白了。防抖的含义就是让某个时间期限内，事件处理函数只执行一次，大大节省了性能的消耗。