Pertanyaan Apa yang tanda seru lakukan sebelum fungsi itu?


!function () {}();

1020
2017-09-20 21:21


asal


Jawaban:


Syntax JavaScript 101. Berikut ini adalah deklarasi fungsi:

function foo() {}

Perhatikan bahwa tidak ada titik koma: ini hanyalah sebuah fungsi pernyataan. Anda akan membutuhkan doa, foo(), untuk benar-benar menjalankan fungsi.

Sekarang, ketika kita menambahkan tanda seru yang tampaknya tidak berbahaya: !function foo() {} itu mengubahnya menjadi ekspresi. Itu sekarang menjadi ekspresi fungsi.

Itu ! sendiri tidak memohon fungsi, tentu saja, tetapi sekarang kita dapat menempatkan () pada akhirnya: !function foo() {}() yang memiliki prioritas lebih tinggi daripada ! dan langsung memanggil fungsi.

Jadi apa yang penulis lakukan adalah menyimpan byte per ekspresi fungsi; cara penulisan yang lebih mudah dibaca adalah ini:

(function(){})();

Akhirnya, ! membuat ekspresi kembali benar. Ini karena secara default semua kembali IIFE undefined, yang meninggalkan kita !undefined yang mana true. Tidak terlalu berguna.


1737
2018-04-13 20:02



Fungsi:

function () {}

tidak menghasilkan apa-apa (atau tidak terdefinisi).

Terkadang kita ingin memanggil fungsi saat kita membuatnya. Anda mungkin tergoda untuk mencoba ini:

function () {}()

tetapi hasilnya a SyntaxError.

Menggunakan ! operator sebelum fungsi menyebabkannya diperlakukan sebagai ekspresi, jadi kita bisa menyebutnya:

!function () {}()

Ini juga akan mengembalikan kebalikan boolean dari nilai kembalian dari fungsi, dalam kasus ini true, karena !undefined aku s true. Jika Anda ingin nilai hasil aktual menjadi hasil panggilan, coba lakukan dengan cara ini:

(function () {})()

327
2017-09-20 21:28



Ada gunanya menggunakan ! untuk panggilan fungsi ditandai pada panduan JavaScript airbnb

Umumnya ide untuk menggunakan teknik ini pada file yang terpisah (alias modul) yang kemudian disambung. Peringatan di sini adalah file-file yang seharusnya digabungkan oleh alat-alat yang meletakkan file baru di baris baru (yang merupakan perilaku umum untuk sebagian besar alat konkrit). Dalam hal ini menggunakan ! akan membantu untuk menghindari kesalahan jika modul yang sebelumnya digabungkan tidak mengikuti tanda titik koma, namun itu akan memberikan fleksibilitas untuk menempatkannya dalam urutan apa pun tanpa khawatir.

!function abc(){}()
!function bca(){}();

Akan bekerja sama dengan

!function abc(){}()
;(function bca(){})();

tetapi menyimpan dua karakter dan tampilan yang sewenang-wenang lebih baik.

Dan dengan cara apapun +,-,~,void operator memiliki efek yang sama, dalam hal fungsi memohon, pasti jika Anda telah menggunakan sesuatu untuk kembali dari fungsi itu, mereka akan bertindak berbeda.

abcval = !function abc(){return true;}() // abcval equals false
bcaval = +function bca(){return true;}() // bcaval equals 1
zyxval = -function zyx(){return true;}() // zyxval equals -1
xyzval = ~function xyz(){return true;}() // your guess?

tetapi jika Anda menggunakan pola IIFE untuk satu file satu kode modul pemisahan dan menggunakan alat konkret untuk optimasi (yang membuat satu baris pekerjaan file satu), dari konstruksi

!function abc(/*no returns*/) {}()
+function bca() {/*no returns*/}()

Akan melakukan eksekusi kode aman, sama dengan contoh kode pertama.

Yang satu ini akan menimbulkan kesalahan karena JavaScript ASI tidak akan bisa melakukan tugasnya.

!function abc(/*no returns*/) {}()
(function bca() {/*no returns*/})()

Satu catatan tentang operator unary, mereka akan melakukan pekerjaan serupa, tetapi hanya jika mereka tidak menggunakan modul pertama. Jadi mereka tidak begitu aman jika Anda tidak memiliki kontrol penuh atas urutan penggabungan.

Ini bekerja:

!function abc(/*no returns*/) {}()
^function bca() {/*no returns*/}()

Ini bukan:

^function abc(/*no returns*/) {}()
!function bca() {/*no returns*/}()

46
2017-10-01 18:10



Ini mengembalikan apakah pernyataan dapat dievaluasi ke salah. misalnya:

!false      // true
!true       // false
!isValid()  // is not valid

Anda dapat menggunakannya dua kali untuk memaksa nilai ke boolean:

!!1    // true
!!0    // false

Jadi, untuk lebih langsung menjawab pertanyaan Anda:

var myVar = !function(){ return false; }();  // myVar contains true

Edit: Ini memiliki efek samping mengubah deklarasi fungsi ke ekspresi fungsi. Misalnya. kode berikut ini tidak valid karena ditafsirkan sebagai deklarasi fungsi yang tidak diperlukan identifier (atau nama fungsi):

function () { return false; }();  // syntax error

26
2017-09-20 21:25



Dan inilah sesuatu yang saya tahu dari konsol. Seperti yang disebutkan sebelumnya, tanda seru membuat fungsi mengembalikan boolean.

Untuk yang terakhir dari sintaks:

( function my_function() {} )()

Kita dapat melakukan sesuatu seperti:

(function add_them(a,b) { return a+b;} )(9,4)

Seperti definisi dan panggilan fungsi simultan.

Edit:
Sekarang Anda akan bertanya apa gunanya '!' ketik definisi fungsi. Mari pertimbangkan hal-hal berikut:

!function a_would_be_function() { alert("Do some junk but inside a function"); }()

Anda ingin menjalankan fungsi seperti di atas, tetapi tanpa '!' akan menghasilkan kesalahan. Semoga saya jelas.


5
2018-05-06 14:49



! itu logis TIDAK operator, itu adalah operator boolean yang akan membalikkan sesuatu ke kebalikannya.

Meskipun Anda dapat mengabaikan tanda kurung fungsi yang dipanggil dengan menggunakan BANG (!) sebelum fungsi, itu akan tetap membalikkan kembali, yang mungkin tidak seperti yang Anda inginkan. Seperti dalam kasus IEFE, itu akan kembali tidak terdefinisi, yang bila dibolak menjadi boolean benar.

Sebagai gantinya, gunakan tanda kurung tutup dan BANG (!) jika diperlukan.

// I'm going to leave the closing () in all examples as invoking the function with just ! and () takes away from what's happening.

(function(){ return false; }());
=> false

!(function(){ return false; }());
=> true

!!(function(){ return false; }());
=> false

!!!(function(){ return false; }());
=> true

Operator Lain yang berfungsi ...

+(function(){ return false; }());
=> 0

-(function(){ return false; }());
=> -0

~(function(){ return false; }());
=> -1

Operator Gabungan ...

+!(function(){ return false; }());
=> 1

-!(function(){ return false; }());
=> -1

!+(function(){ return false; }());
=> true

!-(function(){ return false; }());
=> true

~!(function(){ return false; }());
=> -2

~!!(function(){ return false; }());
=> -1

+~(function(){ return false; }());
+> -1

3
2017-07-31 16:36



Cara lain untuk menulis IIFE (ekspresi fungsi yang segera dipanggil).

Cara penulisan lainnya -

(function( args ) {})()

sama dengan

!function ( args ) {}();

2
2018-03-06 09:56



Ini hanya untuk menghemat data byte ketika kita melakukan minification javascript.

pertimbangkan fungsi anonim di bawah ini

function (){}

Untuk membuat fungsi self invoking di atas kita umumnya akan mengubah kode di atas sebagai

(function (){}())

Sekarang kami menambahkan dua karakter tambahan (,) selain menambahkan () pada akhir fungsi yang diperlukan untuk memanggil fungsi. Dalam proses minifikasi kami umumnya fokus untuk mengurangi ukuran file. Jadi kita juga bisa menulis fungsi di atas sebagai

!function (){}()

Masih keduanya fungsi memohon diri dan kami menyimpan byte juga. Alih-alih 2 karakter (,) kami hanya menggunakan satu karakter !


2
2017-09-05 10:05