JavaScript IIFE: Panduan Lengkap untuk Ungkapan Fungsi Dengan Segera

JavaScript menawarkan pelbagai alatan untuk mengendalikan skop dan pelaksanaan dengan berkesan, dan salah satu yang paling ketara ialah Ungkapan Fungsi Segera Dikenakan (IIFE).

IIFE ialah fungsi yang dilaksanakan serta-merta selepas ditakrifkan, menyediakan skop peribadi untuk pembolehubah dan fungsi. Teknik ini biasanya digunakan dalam senario yang memerlukan kod bersih, modular dan bebas konflik.

Apakah IIFE?

IIFE ialah fungsi JavaScript yang berjalan sebaik sahaja ia ditakrifkan. Begini rupanya:

(function () {
  console.log("This is an IIFE!");
})();

Atau, Menggunakan fungsi anak panah ES6, ia kelihatan seperti ini:

(() => {
  console.log("IIFE with an arrow function!");
})();

Set pertama kurungan () membalut definisi fungsi, menjadikannya ungkapan fungsi dan bukannya pengisytiharan. Set kurungan kedua () segera menggunakan fungsi.

Sintaks IIFE Alternatif

Terdapat beberapa cara yang sah untuk menulis IIFE:

// Using the unary operator
!(function () {
  console.log("IIFE using !");
})();

// Using void
void (function () {
  console.log("IIFE using void");
})();

// Using + operator
+(function () {
  console.log("IIFE using +");
})();

// IIFE with parameters and return value
const result = (function (x, y) {
  return x + y;
})(10, 20);
console.log(result); // 30

Mengapa Menggunakan IIFE?

IIFE menawarkan beberapa kelebihan:

• Mengelakkan Pencemaran Skop Global: Merangkum pembolehubah, mencegah konflik dengan pembolehubah global.
• Permulaan Satu Kali: Bagus untuk tugasan persediaan seperti konfigurasi.
• Encapsulation for Modularity: Memastikan kod teratur dan serba lengkap.
• Penciptaan Penutupan: Mengekalkan keadaan peribadi dalam fungsi.

Contoh Dunia Nyata

Fungsi Utiliti Membungkus

const utils = (function () {
  const calculateSum = (a, b) => a + b;
  const calculateProduct = (a, b) => a * b;

  // Only expose what we want to be public
  return {
    sum: calculateSum,
    // product remains private
  };
})();

console.log(utils.sum(3, 7)); // 10
console.log(utils.calculateProduct); // undefined

Dalam contoh ini, fungsi calculateSum adalah peribadi dan tidak boleh diakses di luar IIFE.

Meniru Skop Blok dalam JavaScript Lama

Sebelum let and const tersedia, pembangun menggunakan IIFE untuk mencapai skop blok.

for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 1000); // 0, 1, 2
  })(i);
}

Corak Singleton dengan IIFE

const Config = (function () {
  let instance;

  function createInstance() {
    const settings = {
      theme: "dark",
      language: "en",
    };

    return {
      getSettings: () => settings,
      updateSettings: (newSettings) => Object.assign(settings, newSettings),
    };
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

const config1 = Config.getInstance();
const config2 = Config.getInstance();
console.log(config1 === config2); // true

Corak Modul

const Calculator = (function () {
  // Private variables and methods
  let result = 0;

  function validate(num) {
    return typeof num === "number" && !isNaN(num);
  }

  // Public API
  return {
    add: function (num) {
      if (validate(num)) {
        result += num;
      }
      return this;
    },
    subtract: function (num) {
      if (validate(num)) {
        result -= num;
      }
      return this;
    },
    getResult: function () {
      return result;
    },
  };
})();

Alternatif Moden

Walaupun IIFE masih berguna dalam senario tertentu, JavaScript moden menawarkan beberapa alternatif dengan kelebihan tersendiri. Ini perbandingannya:

Bila Menggunakan IIFE Hari Ini

IIFE masih relevan untuk:

• SDK Pihak Ketiga: Mengelakkan konflik pembolehubah global.
• Kod Analitik: Mengasingkan logik penjejakan.
• Penyelenggaraan Kod Warisan: Mengekalkan pangkalan kod lama tanpa ciri moden.
• Sambungan Penyemak Imbas: Memastikan keserasian tanpa modul.
• Polyfills: Menyediakan keserasian ke belakang.

Amalan Terbaik dan Perangkap

Kes Penggunaan Lanjutan

• Pengendalian Acara dengan IIFE

(function () {
  console.log("This is an IIFE!");
})();

• Corak Ruang Nama

(() => {
  console.log("IIFE with an arrow function!");
})();

Pertimbangan Prestasi

• Kesan Saiz Himpunan

// Using the unary operator
!(function () {
  console.log("IIFE using !");
})();

// Using void
void (function () {
  console.log("IIFE using void");
})();

// Using + operator
+(function () {
  console.log("IIFE using +");
})();

// IIFE with parameters and return value
const result = (function (x, y) {
  return x + y;
})(10, 20);
console.log(result); // 30

• Konteks Pelaksanaan

const utils = (function () {
  const calculateSum = (a, b) => a + b;
  const calculateProduct = (a, b) => a * b;

  // Only expose what we want to be public
  return {
    sum: calculateSum,
    // product remains private
  };
})();

console.log(utils.sum(3, 7)); // 10
console.log(utils.calculateProduct); // undefined

Kesimpulan

Walaupun ciri JavaScript moden seperti modul ES dan skop blok telah mengurangkan keperluan untuk IIFE dalam beberapa senario, ia kekal sebagai corak penting dalam pembangunan JavaScript. Memahami IIFE adalah penting untuk bekerja dengan pangkalan kod sedia ada, mencipta perpustakaan serasi penyemak imbas dan melaksanakan corak reka bentuk tertentu dengan berkesan.

Ingat bahawa pilihan antara menggunakan IIFE dan alternatif moden harus berdasarkan kes penggunaan khusus anda, keperluan sokongan penyemak imbas dan kekangan projek.

Atas ialah kandungan terperinci JavaScript IIFE: Panduan Lengkap untuk Ungkapan Fungsi Dengan Segera. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!