Rumah >hujung hadapan web >tutorial js >Terangkan perbezaan penggunaan foo antara fungsi foo() {} dan var foo = function() {}

Terangkan perbezaan penggunaan foo antara fungsi foo() {} dan var foo = function() {}

王林ke hadapan: 2023-09-14 20:13:091207semak imbas

解释一下 function foo() {} 和 var foo = function() {} 在 foo 用法上的区别

Dalam JavaScript, kami mempunyai cara berbeza untuk mentakrifkan fungsi. function foo() {} dan var foo = function() { } ialah dua cara berbeza untuk mentakrifkan fungsi. Kedua-dua kaedah mempunyai kelebihan dan kes penggunaan yang berbeza, bagaimanapun, kedua-duanya memberikan hasil yang sama apabila melaksanakan fungsi.

Jadi, tutorial ini akan mengajar kita perbezaan antara dua cara untuk menentukan fungsi.

Penjelasan fungsi foo() { }: pengisytiharan fungsi

function foo() { } ialah cara biasa untuk mengisytiharkan fungsi dalam JavaScript dan digunakan oleh setiap pemula dan pembangun. Sebagai alternatif, kita boleh memanggilnya fungsi bernama.

Apabila kawalan pelaksanaan program mencapai skop pengisytiharan fungsi, JavaScript menilai pengisytiharan fungsi. Penilaian pengisytiharan fungsi bukan sebahagian daripada proses langkah demi langkah, tetapi dinilai pada permulaan.

Selain itu, pengisytiharan fungsi dinaikkan ke bahagian atas setiap kod dalam skop khusus di mana ia diisytiharkan. Oleh itu, kita boleh memanggil fungsi di mana-mana dalam skop, walaupun sebelum pengisytiharan.

Tatabahasa

Pengguna boleh mengisytiharkan fungsi mengikut sintaks berikut.

function foo(parameters, .... ) {
   // function body
}

Dalam sintaks di atas, 'fungsi' ialah kata kunci yang mewakili pengisytiharan fungsi, dan foo ialah nama fungsi.

Contoh

Dalam contoh ini, kami mentakrifkan fungsi foo() melalui pengisytiharan fungsi. Selepas itu, kami memanggilnya seperti fungsi biasa.

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // declaring the function
         function foo() {
            output.innerHTML += "The function foo is invoked!";
         }
         foo();
      </script>
   </body>
</html>

Contoh

Dalam contoh di bawah, kami mentakrifkan fungsi dengan parameter. Kami lulus invokedPosition sebagai hujah kedua, mewakili kedudukan dari mana kami memanggil fungsi tersebut.

Kami memanggil fungsi foo() sebelum pengisytiharan kerana JavaScript menilai fungsi pada permulaan apabila aliran pelaksanaan memasuki skop dan dinaikkan ke atas.

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // As foo is hoisted on top, we can call the function before the declaration
         foo(10, "Top");
         
         // declaring the function with parameters
         function foo(param1, inovkingPosition) {
            output.innerHTML += "The function foo is invoked from " + inovkingPosition + "</br>";
            output.innerHTML += "The value of the param1 is " + param1 + " <br/> <br/>";
         }
         foo(20, "bottom");
      </script>
   </body>
</html>

var foo = function() { } penjelasan: ungkapan fungsi

var foo = function() { } juga sama seperti mentakrifkan fungsi, yang dipanggil ungkapan fungsi. Di sini, function() { } ialah ungkapan fungsi yang kami simpan dalam pembolehubah foo. foo ialah pembolehubah normal seperti mana-mana pembolehubah lain, malah kita boleh menyimpan nombor dan rentetan dalam pembolehubah foo.

JavaScript tidak menilai ungkapan fungsi pada permulaan seperti yang dilakukan oleh pengisytiharan fungsi. Ia menilai ungkapan fungsi langkah demi langkah. Apabila aliran pelaksanaan mencapai ungkapan fungsi, JavaScript menilai ungkapan dan menyimpannya dalam pembolehubah foo.

Selain itu, ungkapan fungsi tidak dinaikkan ke bahagian atas kod, jadi kami tidak boleh memanggil ungkapan fungsi sebelum mentakrifkannya seperti pengisytiharan fungsi.

Tatabahasa

Pengguna boleh menggunakan ungkapan fungsi untuk mentakrifkan fungsi mengikut sintaks berikut.

var foo = function (params) {
   
   // function body
};

Dalam sintaks di atas, definisi fungsi tidak mempunyai nama, jadi kita boleh memanggilnya sebagai fungsi tanpa nama. Kita boleh menggunakan pembolehubah foo sebagai pengecam fungsi.

Contoh

Dalam contoh ini, kami telah mentakrifkan fungsi menggunakan ungkapan fungsi dan menyimpannya di dalam pengecam foo. Selepas itu, kami menggunakan pengecam foo untuk memanggil ungkapan fungsi yang disimpan di dalamnya, menghantar argumen dalam pengecam foo.

<html>
   <body>
      <h2>var foo = function() { } (function expression)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // defining the function expression and storing it in the foo variable
         var foo = function (param) {
            output.innerHTML += "Inside the function expression. </br>";
            output.innerHTML += "The value of the param is " + param + "</br>";
         };
         
         // calling the function expression via foo identifier
         foo("Hi Users!");
      </script>
   </body>
</html>

Ekspresi fungsi mempunyai kes penggunaan yang berbeza. Pengguna boleh menulis sintaks pendek untuk fungsi menggunakannya sebagai fungsi panggil balik. Selain itu, pengguna juga boleh menggunakannya sebagai fungsi penutupan. Kadangkala, kita perlu lulus fungsi sebagai parameter dan kemudian kita boleh menggunakan ungkapan fungsi.

Contoh

Dalam contoh ini, kami menghantar ungkapan fungsi sebagai hujah kepada kaedah sort(). Pengguna boleh melihat bahawa kami menghantar fungsi tanpa nama sebagai parameter dan bukannya menulis pengisytiharan dengan nama.

<html>
   <body>
      <h2>Passing function expression as an argument</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let number = [320, 45, 3, 23, 54];
      
         // passing the function expression as an argument of the sort() method
         number.sort(function (element1, element2) {
            return element2 - element1;
         });
         output.innerHTML += "The sorted array is " + number;
      </script>
   </body>
</html>

Perbezaan antara fungsi foo() { } dan var foo = function() { }

Jadual berikut menyerlahkan perbezaan utama antara fungsi foo() { } dan var foo = function() { }:

Fungsi foo() { }	var foo = function() { }
Ini adalah pengisytiharan fungsi.	Ia adalah ungkapan fungsi.
Ia digantung dari bahagian atas skop.	Ia tidak ditingkatkan dalam julat.
JavaScript menilai skop pada permulaan pelaksanaannya.	JavaScript menilai kod semasa ia melangkah melaluinya.
Kita boleh kenal pasti dengan nama fungsinya.	Kita boleh mengenal pasti menggunakan pengecam di mana ia disimpan.
digunakan untuk menentukan fungsi biasa.	Gunakannya apabila kita perlu lulus fungsi sebagai parameter atau perlu menggunakan fungsi sebagai penutupan.

Kesimpulan

Dalam JavaScript, terdapat dua cara untuk mentakrifkan fungsi: Pengisytiharan fungsi dan Ekspresi fungsi. Pengisytiharan fungsi ditakrifkan menggunakan kata kunci fungsi, diikuti dengan nama fungsi, biasanya ditulis sebagai function foo() {}. Apabila pelaksanaan program mencapai skop di mana fungsi diisytiharkan, JavaScript menilai pengisytiharan fungsi dan mengangkatnya ke bahagian atas kod dalam skop tersebut. Ini bermakna mereka boleh dipanggil sebelum mereka diisytiharkan.

Ungkapan fungsi ditakrifkan menggunakan pembolehubah, biasanya ditulis sebagai var foo = function() {}. Ungkapan fungsi tidak dinaikkan dan mesti ditakrifkan sebelum dipanggil. Pengisytiharan fungsi dan ungkapan fungsi boleh melaksanakan tugas yang sama, tetapi mereka mempunyai sintaks dan tingkah laku pengiraan yang berbeza.

Atas ialah kandungan terperinci Terangkan perbezaan penggunaan foo antara fungsi foo() {} dan var foo = function() {}. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript sort 标识符回调函数字符串 var 闭包 function 作用域

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk membuat kanvas dengan warna latar belakang menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk membuat kanvas dengan warna latar belakang menggunakan FabricJS?

Artikel berkaitan

Lihat lagi