Apa gunanya fungsi segera dipanggil dalam javascript?

Question

Ringkasan. dalam tutorial ini, Anda akan belajar tentang JavaScript yang segera memanggil ekspresi fungsi (IIFE)

Table of Contents Show

Mengapa IIFE
Dinamakan IIFE
IIFE dimulai dengan titik koma (;)
IIFE beraksi
jQuery & IIFE
Mengapa menggunakan ekspresi fungsi yang langsung dipanggil?
Apa tujuan utama dari fungsi pemanggilan otomatis?
Apa fungsi langsung dalam JavaScript?
Di mana kita bisa menggunakan IIFE di JavaScript?

TL;DR

Ekspresi fungsi yang segera dipanggil JavaScript adalah fungsi yang didefinisikan sebagai ekspresi dan dieksekusi segera setelah dibuat. Berikut ini menunjukkan sintaks untuk mendefinisikan ekspresi fungsi yang langsung dipanggil

(function(){
    //...
})();
Code language: JavaScript (javascript)

Mengapa IIFE

Saat Anda mendefinisikan suatu fungsi, mesin JavaScript menambahkan fungsi tersebut ke objek global. Lihat contoh berikut

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_

Di browser web, mesin JavaScript menambahkan fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 ke objek global

console.log(window.add);
Code language: JavaScript (javascript)

4

console.log(window.add);
Code language: JavaScript (javascript)

Demikian pula, jika Anda mendeklarasikan variabel di luar fungsi menggunakan kata kunci

console.log(window.add);
Code language: JavaScript (javascript)

5, mesin JavaScript juga menambahkan variabel ke objek global

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

_

Jika Anda memiliki banyak variabel dan fungsi global, mesin JavaScript hanya akan melepaskan memori yang dialokasikan untuknya hingga objek global kehilangan cakupannya

Akibatnya, skrip dapat menggunakan memori secara tidak efisien. Selain itu, memiliki variabel dan fungsi global kemungkinan besar akan menyebabkan benturan nama

Salah satu cara untuk mencegah fungsi dan variabel mencemari objek global adalah dengan menggunakan ekspresi fungsi yang langsung dipanggil

Dalam JavaScript, Anda dapat memiliki ekspresi berikut

'This is a string';
(10+20);
Code language: JavaScript (javascript)

Sintaks ini benar meskipun ekspresi tidak berpengaruh. Suatu fungsi dapat juga dideklarasikan sebagai ekspresi yang disebut ekspresi fungsi

let sum = function(a, b) {
    return a + b;
}



Code language: JavaScript (javascript)

_

Dalam sintaks ini, bagian di sisi kanan operator penugasan(

console.log(window.add);
Code language: JavaScript (javascript)

6) adalah ekspresi fungsi. Karena fungsi adalah ekspresi, Anda dapat membungkusnya di dalam tanda kurung

let sum = (function(a, b) {
    return a + b;
});
Code language: JavaScript (javascript)

Dalam contoh ini, variabel

console.log(window.add);
Code language: JavaScript (javascript)

_7 direferensikan sebagai fungsi anonim yang menambahkan dua argumen

Selain itu, Anda dapat menjalankan fungsi tersebut segera setelah membuatnya

let sum = (function(a,b){
    return a + b;
})(10, 20);

console.log(sum);
Code language: JavaScript (javascript)

Dalam contoh ini, variabel

console.log(window.add);
Code language: JavaScript (javascript)

_7 menampung hasil pemanggilan fungsi

Ekspresi berikut disebut ekspresi fungsi yang segera dipanggil (IIFE) karena fungsi dibuat sebagai ekspresi dan dieksekusi segera

(function(a,b){
        return a + b;
})(10,20);
Code language: JavaScript (javascript)

Ini adalah sintaks umum untuk mendefinisikan IIFE

(function(){
    //...
})();
Code language: JavaScript (javascript)

Perhatikan bahwa Anda dapat menggunakan fungsi panah untuk menentukan IIFE

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_0

Dengan menempatkan fungsi dan variabel di dalam ekspresi fungsi yang langsung dipanggil, Anda dapat menghindari pencemarannya ke objek global

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_1

Dinamakan IIFE

IIFE dapat memiliki nama. Namun, itu tidak dapat dipanggil lagi setelah eksekusi

function add(a,b) {
    return a + b;
}



Code language: JavaScript (javascript)

_2

IIFE dimulai dengan titik koma (;)

Terkadang, Anda mungkin melihat IIFE yang dimulai dengan titik koma (;)

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_3

Dalam sintaks ini, titik koma digunakan untuk mengakhiri pernyataan jika dua atau lebih file JavaScript digabungkan secara membabi buta menjadi satu file

Misalnya, Anda mungkin memiliki dua file

console.log(window.add);
Code language: JavaScript (javascript)

_9 dan

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

0 yang menggunakan IIF

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_4

Jika Anda menggunakan alat pembuat kode untuk menggabungkan kode dari kedua file menjadi satu file, tanpa titik koma (

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

1) kode JavaScript yang digabungkan akan menyebabkan kesalahan sintaksis

IIFE beraksi

Misalkan Anda memiliki perpustakaan bernama kalkulator. js dengan fungsi berikut

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_5

Dan Anda memuat

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

_2 dalam dokumen HTML

Nanti, Anda juga ingin memuat pustaka JavaScript lain bernama

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

3 ke dokumen yang sama

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_6

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

3 juga memiliki fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_7

Saat Anda menggunakan fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 dalam dokumen HTML, fungsi ini mengembalikan string

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

7 alih-alih jumlah dari dua angka

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_8

Ini karena fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 di

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

3 menimpa fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 di perpustakaan

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

2

Untuk mengatasinya, Anda bisa menerapkan IIFE di kalkulator. js sebagai berikut

function add(a,b) {
    return a + b;
}
Code language: JavaScript (javascript)

_9

IIFE mengembalikan objek yang berisi metode

'This is a string';
(10+20);
Code language: JavaScript (javascript)

2 dan

'This is a string';
(10+20);
Code language: JavaScript (javascript)

3 yang mereferensikan fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 dan

'This is a string';
(10+20);
Code language: JavaScript (javascript)

5. Dalam dokumen HTML, Anda dapat menggunakan perpustakaan

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

2 sebagai berikut

console.log(window.add);



Code language: JavaScript (javascript)

0

'This is a string';
(10+20);
Code language: JavaScript (javascript)

7 memanggil fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 yang diekspor oleh

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

2 sedangkan panggilan kedua ke fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 mereferensikan fungsi

console.log(window.add);
Code language: JavaScript (javascript)

3 di

var counter = 10;
console.log(window.counter); // 10
Code language: JavaScript (javascript)

3

jQuery & IIFE

Dokumen HTML berikut menggunakan pustaka jQuery

console.log(window.add);
Code language: JavaScript (javascript)

1

Saat Anda mengimpor pustaka jQuery, Anda dapat mengakses banyak fungsi jQuery yang berguna melalui objek

let sum = function(a, b) {
    return a + b;
}
Code language: JavaScript (javascript)

3 atau

let sum = function(a, b) {
    return a + b;
}
Code language: JavaScript (javascript)

4. Di bawah tenda, jQuery menggunakan IIFE untuk mengekspos fungsinya

Dengan melakukan ini, jQuery hanya perlu menggunakan satu variabel global (

let sum = function(a, b) {
    return a + b;
}
Code language: JavaScript (javascript)

3) untuk mengekspos banyak fungsi tanpa mencemari objek global

Contoh berikut mengilustrasikan cara mengubah objek $ jQuery menjadi _ di dalam IIFE

console.log(window.add);
Code language: JavaScript (javascript)

2

Dalam contoh ini, kami meneruskan objek jQuery ke IIFE dan menggunakan argumen

let sum = function(a, b) {
    return a + b;
}
Code language: JavaScript (javascript)

6 sebagai gantinya

Dalam tutorial ini, Anda akan belajar tentang ekspresi fungsi yang segera dipanggil JavaScript (IIFE) dan tujuannya

Mengapa menggunakan ekspresi fungsi yang langsung dipanggil?

Ekspresi fungsi yang langsung dipanggil dapat digunakan untuk menghindari variabel mengangkat dari dalam blok, melindungi dari pencemaran lingkungan global dan secara bersamaan memungkinkan akses publik ke metode sambil mempertahankan privasi untuk variabel yang ditentukan dalam fungsi

Apa tujuan utama dari fungsi pemanggilan otomatis?

Fungsi Self-Invoking adalah jenis fungsi yang dipanggil atau dipanggil secara otomatis setelah definisinya ketika diikuti oleh set tanda kurung () dan terutama digunakan untuk tugas inisialisasi

Apa fungsi langsung dalam JavaScript?

IIFE (Immediately Invoked Function Expression) adalah fungsi JavaScript yang berjalan segera setelah didefinisikan . Nama IIFE dipromosikan oleh Ben Alman dalam blognya. (fungsi () { // … })();

Di mana kita bisa menggunakan IIFE di JavaScript?

Ini adalah fungsi JavaScript yang berjalan segera setelah didefinisikan. IIFE (Immediately Invoked Function Expression) dapat digunakan untuk menghindari pengangkatan variabel dari dalam blok . Ini memungkinkan akses publik ke metode sambil mempertahankan privasi untuk variabel yang ditentukan dalam fungsi.

kode javascript