實現 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);} }

現在我打算窗口從右邊拖到到左邊。

天吶，控制臺居然只輸出了一次日志，不管我怎么拉動，當我停下來的時候就執行了最后一次

這下我們明白了。防抖的含義就是讓某個時間期限內，事件處理函數只執行一次，大大節省了性能的消耗。

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的windows 改变文件大小 函数_手写 bind call apply 方法 与 实现节流防抖函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。