cari

Rumah  >  Artikel  >  hujung hadapan web  >  Terokai konsep skop fungsi JavaScript dan pelbagai jenis fungsi JavaScript

Terokai konsep skop fungsi JavaScript dan pelbagai jenis fungsi JavaScript

WBOY
WBOYke hadapan
2023-09-07 14:41:021079semak imbas

探索 JavaScript 函数作用域的概念和不同类型的 JavaScript 函数

Dalam JavaScript, skop berbeza membolehkan kami mengakses fungsi dan pembolehubah dari lokasi berbeza dalam kod. Kami akan belajar tentang skop fungsi dalam tutorial ini. Selain itu, kami akan meneroka pelbagai jenis ungkapan fungsi dalam JavaScript.

Julat fungsi

Apabila kami mencipta fungsi baharu dalam JavaScript, ia juga mewujudkan skop fungsi khusus itu. Ini bermakna apa-apa pembolehubah yang kita isytiharkan di dalam fungsi atau mentakrifkan fungsi bersarang di dalamnya, kita boleh mengaksesnya hanya dalam blok fungsi.

Jika kita cuba mengakses pembolehubah yang ditakrifkan di dalam blok fungsi dari luar fungsi, kita akan mendapat ralat rujukan.

Tatabahasa

Anda boleh mengikuti sintaks berikut untuk mentakrifkan fungsi dan memahami skop fungsi. 

function  function_name(){
   var variable = 10; // variable has a function scope.
}
let variable1 = variable; 
// we can't access the variable here as it has a function scope.

Dalam sintaks di atas, anda dapat melihat bahawa kami tidak boleh mengakses pembolehubah di luar fungsi kerana blok fungsi menyekatnya.

Contoh 1

Dalam contoh ini, kami mencipta fungsi sampel dan menentukan pembolehubah di dalam fungsi dengan skop blok. Jika kita cuba mengakses pembolehubah yang ditakrifkan dalam fungsi Sample() dari luar fungsi, JavaScript akan membuang ralat rujukan. 

<html>
<body>
   <h2>Function Scope in JavaScript</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      // defining the function
      function sample() {
         //  variables with function scope.
         var website = "TutorialsPoint!";
         var language = "JavaScript";
         output.innerHTML +=
            "You are learning the " +
            language +
            " programming language on " +
            website +
            " </br>";
      }
      sample();
      // we can't access language and website variables here.
   </script>
</body>
</html>

Contoh 2

Kami takrifkan nested_function() dalam fungsi contoh dalam kes ini. Kami tidak boleh memanggil nested_funciton() di luar fungsi sample() kerana nested_function berada dalam skop fungsi sampel. 

<html>
<body>
   <h2>Function sSope in JavaScript</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      function sample() {
         //  variables with function scope.
         var num = 10;
         function nested_function() {
            // num variables also can be accessed here as nested_function() is
            //inside the scope of sample function
            var string = "JavaScript";
            output.innerHTML +=
               "The value of the num variable is " + num + "<br/>";
            output.innerHTML +=
               "The value of the string variable is " + string + "</br>";
         }
         //  we can call the nested_function() inside the sample() function only
         nested_function();
         // we can't access the string variable here as the scope of 
         //nested_function bounds it
      }
      sample();
   </script>
</body>
</html>

Pelbagai jenis fungsi dalam JavaScript

Mengikut definisi dan pengisytiharan fungsi, terdapat banyak jenis fungsi yang akan kita pelajari satu persatu di sini.

Fungsi biasa

Fungsi biasa ialah fungsi yang biasa digunakan oleh semua pembangun JavaScript. Kita boleh mentakrifkan fungsi biasa menggunakan nama fungsi diikuti dengan kata kunci fungsi.

Fungsi biasa kekal di bahagian atas skop semasa fungsi. Ini bermakna kita boleh memanggil fungsi sebelum mentakrifkannya, tetapi ia harus ditakrifkan selepas pelaksanaan.

Tatabahasa

Ikuti sintaks ini untuk menentukan fungsi biasa. 

function function_name(){
   // function body
}

Dalam sintaks di atas, kami menggunakan kata kunci fungsi untuk mentakrifkan fungsi. 'function_name' ialah nama fungsi, dan kita boleh menulis kod untuk badan fungsi dalam kurungan kerinting.

Ekspresi fungsi

Ekspresi fungsi juga berfungsi seperti fungsi biasa. Walau bagaimanapun, perbezaannya ialah ia tidak mempunyai sebarang nama dan kita perlu menyimpan ungkapan fungsi dalam pembolehubah. Kita boleh menggunakan pengecam untuk memanggil fungsi yang menyimpannya.

JavaScript menilai ungkapan fungsi langkah demi langkah. Oleh itu, ia tidak dinaikkan ke bahagian atas skop, jadi kami tidak boleh memanggilnya sebelum mengisytiharkannya.

Tatabahasa

Ikuti sintaks ini untuk menentukan ungkapan fungsi. 

var function_identifier = function () {
   // function body
}
function_identifier();

Dalam sintaks di atas, kami telah menentukan fungsi tanpa nama hanya menggunakan kata kunci fungsi dan menyimpannya dalam pembolehubah function_identifier. Selain itu, pengguna boleh melihat cara kami menggunakan function_identifier untuk memanggil ungkapan fungsi.

Fungsi anak panah

Fungsi anak panah telah diperkenalkan dalam ES6, semakan utama terakhir JavaScript pada tahun 2015. Ia adalah sintaks yang lebih pendek untuk mentakrifkan fungsi tanpa nama fungsi. Juga, ia dipanggil ekspresi dan fungsi tanpa nama kerana ia tidak mengandungi identiti mereka.

Tatabahasa

Ikuti sintaks ini untuk menentukan fungsi anak panah. 

var function_identifier =  (params) => {
   // function body
}
function_identifier(arguments);

Dalam sintaks di atas, kami menyimpan ungkapan fungsi anak panah dalam function_identifier. Tambahan pula, kami meluluskan hujah dan hujah di dalam fungsi anak panah sambil memanggil fungsi menggunakan pembolehubah function_identifier.

Tutup fungsi

Kami boleh mencipta fungsi bersarang dalam JavaScript dan mengakses pembolehubah fungsi induk menggunakan fungsi anak. Memandangkan fungsi anak mengandungi akses kepada semua pembolehubah yang ditakrifkan dalam skop fungsi induk, kita boleh memanggil fungsi anak sebagai fungsi penutupan.

Tatabahasa

function parent() {
   // variables of the parent
   var child = () => {
      // variables of child
      // access variables of the parent
   };
   return child;
}
var child = parent();
child();

Dalam sintaks di atas, kita boleh mengakses semua pembolehubah fungsi induk di dalam fungsi anak, dan fungsi induk mengembalikan fungsi anak. Oleh itu, kita boleh memanggil fungsi anak secara tidak langsung dari luar fungsi induk, walaupun ia ditakrifkan dalam skop fungsi induk.

Pembina

Tatabahasa

Kita boleh menggunakan pembina untuk mencipta objek. 

function constructor(property){
   this.property = property
}
var string = new constructor("value");

Dalam sintaks di atas, kami mencipta objek pembina.

Kami mempelajari cara skop fungsi berfungsi untuk fungsi bersarang dengan dua contoh dalam tutorial ini. Selain itu, kami belajar tentang pelbagai jenis fungsi. Selain itu, terdapat beberapa jenis fungsi lain seperti fungsi rekursif atau panggil balik yang pengguna boleh terokai di internet.

Atas ialah kandungan terperinci Terokai konsep skop fungsi JavaScript dan pelbagai jenis fungsi JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript es6 构造函数 标识符 回调函数 递归 闭包 function 对象 作用域
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?Artikel seterusnya：Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?

Artikel berkaitan

Lihat lagi