js閉包的6種應(yīng)用場景總結(jié)

更新時間：2023年09月19日 08:48:20 作者：xxx17

如果一個函數(shù)訪問了此函數(shù)的父級及父級以上的作用域變量,那么這個函數(shù)就是一個閉包,本文將給大家分享js閉包的6種應(yīng)用場景,文中有詳細(xì)的代碼示例,需要的朋友可以參考下

什么是閉包？

閉包的基本定義

如果一個函數(shù)訪問了此函數(shù)的父級及父級以上的作用域變量，那么這個函數(shù)就是一個閉包。閉包會創(chuàng)建一個包含外部函數(shù)作用域變量的環(huán)境，并將其保存在內(nèi)存中，這意味著，即使外部函數(shù)已經(jīng)執(zhí)行完畢，閉包仍然可以訪問和使用外部函數(shù)的變量。

//閉包實例代碼
function fn1() {
  let a = 1;
  function fn2() {
    a++;
    console.log(a);
  }
  return fn2;
}
const fn2 = fn1();
//閉包函數(shù)執(zhí)行完后外部作用域變量仍然存在，并保持狀態(tài)
fn2() //2
fn2() //3

閉包的優(yōu)缺點及特性

閉包的優(yōu)點：

保護(hù)變量：閉包可以將變量封裝在函數(shù)內(nèi)部，避免全局污染，保護(hù)變量不被外部訪問和修改。
延長變量生命周期：閉包使得函數(shù)內(nèi)部的變量在函數(shù)執(zhí)行完后仍然存在，可以在函數(shù)外部繼續(xù)使用。
實現(xiàn)模塊化：閉包可以創(chuàng)建私有變量和私有方法，實現(xiàn)模塊化的封裝和隱藏，提高代碼的可維護(hù)性和安全性。
保持狀態(tài)：閉包可以捕獲外部函數(shù)的變量，并在函數(shù)執(zhí)行時保持其狀態(tài)。這使得閉包在事件處理、回調(diào)函數(shù)等場景中非常有用。

閉包的缺點：

內(nèi)存占用：閉包會導(dǎo)致外部函數(shù)的變量無法被垃圾回收，從而增加內(nèi)存占用。如果濫用閉包，會導(dǎo)致內(nèi)存泄漏問題。
性能損耗：閉包涉及到作用域鏈的查找過程，會帶來一定的性能損耗。在性能要求高的場景下，需要注意閉包的使用。

閉包的特性：

函數(shù)嵌套：閉包的實現(xiàn)依賴于函數(shù)嵌套，即在一個函數(shù)內(nèi)部定義另一個函數(shù)。
記憶外部變量：閉包可以記住并訪問外部函數(shù)的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢。
延長作用域鏈：閉包將外部函數(shù)的作用域鏈延長到內(nèi)部函數(shù)中，使得內(nèi)部函數(shù)可以訪問外部函數(shù)的變量。
返回函數(shù)：閉包通常以函數(shù)的形式返回，使得外部函數(shù)的變量仍然可以被內(nèi)部函數(shù)引用和使用。

閉包的應(yīng)用場景

自執(zhí)行函數(shù)

let say = (function(){
  let val = 'hello world';
  function say(){
    console.log(val);
  }
  return say;
})()

節(jié)流防抖

// 節(jié)流函數(shù)封裝
function throttle(func, delay) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}
// 防抖函數(shù)封裝
function debounce(func, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

函數(shù)柯里化

函數(shù)柯里化（Currying）是一種將多個參數(shù)的函數(shù)轉(zhuǎn)換為一系列接受單個參數(shù)的函數(shù)的過程。舉個簡單的例子，我們有一個原始函數(shù)add(a, b, c)，我們可以將它柯里化為addCurried(a)(b)(c)的形式。

//柯里化前
function add(a, b, c) {
  return a + b + c;
}
console.log(add(1, 2, 3)); //6
//柯里化后
function addCurried1(a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
}
//箭頭函數(shù)簡寫
const addCurried2 = (a) => (b) => (c) => a + b + c;
console.log(addCurried1(1)(2)(3)); //6
console.log(addCurried2(1)(2)(3)); //6

鏈?zhǔn)秸{(diào)用

利用閉包原理封裝一個簡單的計算器

function calculator() {
  let result = 0;
  function add(num) {
    result += num;
    return this;
  }
  function subtract(num) {
    result -= num;
    return this;
  }
  function multiply(num) {
    result *= num;
    return this;
  }
  function divide(num) {
    result /= num;
    return this;
  }
  function getResult() {
    return result;
  }
  function clear() {
    result = 0;
    return this;
  }
  return {
    add,
    subtract,
    multiply,
    divide,
    getResult,
    clear,
  };
}
const calc = calculator();
const result = calc.add(5).subtract(2).divide(3).multiply(6).getResult();
console.log(result); // 輸出：6

迭代器

function createIterator(arr) {
  let index = 0;
  return {
    next: function() {
      if (index < arr.length) {
        return {
          value: arr[index++],
          done: false
        };
      } else {
        return {
          done: true
        };
      }
    }
  };
}
const myIterator = createIterator([1, 2, 3]);
console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { done: true }

發(fā)布-訂閱模式

function createPubSub() {
  // 存儲事件及其對應(yīng)的訂閱者
  const subscribers = {};
  // 訂閱事件
  function subscribe(event, callback) {
    // 如果事件不存在，則創(chuàng)建一個新的空數(shù)組
    if (!subscribers[event]) {
      subscribers[event] = [];
    }
    // 將回調(diào)函數(shù)添加到訂閱者數(shù)組中
    subscribers[event].push(callback);
  }
  // 發(fā)布事件
  function publish(event, data) {
    // 如果事件不存在，則直接返回
    if (!subscribers[event]) {
      return;
    }
    // 遍歷訂閱者數(shù)組，調(diào)用每個訂閱者的回調(diào)函數(shù)
    subscribers[event].forEach((callback) => {
      callback(data);
    });
  }
  // 返回訂閱和發(fā)布函數(shù)
  return {
    subscribe,
    publish,
  };
}
// 使用示例
const pubSub = createPubSub();
// 訂閱事件
pubSub.subscribe("event1", (data) => {
  console.log("訂閱者1收到事件1的數(shù)據(jù):", data);
});
pubSub.subscribe("event2", (data) => {
  console.log("訂閱者2收到事件2的數(shù)據(jù):", data);
});
// 發(fā)布事件
pubSub.publish("event1", "Hello");
// 輸出: 訂閱者1收到事件1的數(shù)據(jù): Hello
pubSub.publish("event2", "World");
// 輸出: 訂閱者2收到事件2的數(shù)據(jù): World

閉包造成的內(nèi)存泄漏怎么解決呢？

閉包中的內(nèi)存泄漏指的是在閉包函數(shù)中，由于對外部變量的引用而導(dǎo)致這些變量無法被垃圾回收機(jī)制釋放的情況。當(dāng)一個函數(shù)內(nèi)部定義了一個閉包，并且這個閉包引用了外部變量時，如果這個閉包被其他地方持有，就會導(dǎo)致外部變量無法被正常釋放，從而造成內(nèi)存泄漏。
解決閉包中的內(nèi)存泄漏問題通常需要注意解除外部變量和閉包函數(shù)的引用，以及解綁函數(shù)本身的引用，使得閉包中引用的外部變量和閉包函數(shù)能夠被垃圾回收機(jī)制釋放。

以下是使用閉包時解決內(nèi)存泄漏的示例

function createClosure() {
  let value = 'Hello';
  // 閉包函數(shù)
  var closure = function() {
    console.log(value);
  };
  // 解綁定閉包函數(shù)，并釋放資源
  var releaseClosure = function() {
    value = null; // 解除外部變量的引用
    closure = null; // 解除閉包函數(shù)的引用
    releaseClosure = null; // 解除解綁函數(shù)的引用
  };
  // 返回閉包函數(shù)和解綁函數(shù)
  return {
    closure,
    releaseClosure
  };
}
// 創(chuàng)建閉包
var closureObj = createClosure();
// 調(diào)用閉包函數(shù)
closureObj.closure(); // 輸出：Hello
// 解綁閉包并釋放資源
closureObj.releaseClosure();
// 嘗試調(diào)用閉包函數(shù)，此時已解綁，不再引用外部變量
closureObj.closure(); // 輸出：null

以上就是js閉包的6種應(yīng)用場景總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于js閉包應(yīng)用場景的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: