Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengelakkan tiruan menggunakan ungkapan fungsi yang dipanggil segera dalam JavaScript?

Bagaimana untuk mengelakkan tiruan menggunakan ungkapan fungsi yang dipanggil segera dalam JavaScript?

PHPzke hadapan: 2023-09-03 19:13:02789semak imbas

如何在 JavaScript 中使用立即调用函数表达式来防止覆盖？

JavaScript membenarkan pembangun menambah fungsi dan tingkah laku pada halaman web. Pembangun perlu mencipta pelbagai fungsi dan pembolehubah untuk menambah kefungsian pada bahagian halaman web yang berlainan.

Apabila membangunkan aplikasi masa nyata, berbilang pembangun bekerja pada projek yang sama. Oleh itu, adalah perlu untuk mengelak daripada menimpa fungsi dan pembolehubah secara tidak sengaja apabila bekerjasama dengan berbilang pembangun. Dalam tutorial ini, kita akan belajar bagaimana untuk mengelakkan tiruan menggunakan ungkapan fungsi yang dipanggil segera.

Tulis semula soalan

Sebagai contoh, dua rakan sekerja sedang mengerjakan projek yang sama dan kedua-duanya mentakrifkan fungsi printAge() di dalam kod dan menggabungkan kod. Sekarang penyemak imbas hanya akan melaksanakan fungsi yang ditakrifkan terakhir kerana ia menimpa semua definisi fungsi lain dengan nama yang sama. Akibatnya, pengguna kadangkala melihat gelagat halaman web yang tidak dijangka. Selain itu, ini boleh berlaku dengan nama pembolehubah.

Contoh (isu liputan)

Dalam contoh di bawah, kami telah menentukan dua pembolehubah dengan nama yang sama. Kami memaparkan nilai berubah pada halaman web. Dalam output, pengguna boleh melihat bahawa pembolehubah "a" kedua menimpa nilai pembolehubah "a" pertama.

<html>
<body>
   <h2> Visualizing the overriding in JavaScript </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var a = "Hello World!";
      var a = "Hi World!";
      output.innerHTML = "The value of a is " + a;
   </script>
</body>
</html>

Penyelesaian untuk memanggil fungsi dengan segera untuk mengelakkan timpa ganti

Fungsi JavaScript mempunyai skop fungsi pembolehubah yang ditakrifkan di dalam fungsi. Jadi, apa sahaja pembolehubah yang kita tentukan di dalam fungsi, kita tidak boleh mengaksesnya di luar fungsi. Oleh itu, kita boleh menentukan pembolehubah yang skopnya terhad kepada fungsi.

Kita boleh menggunakan panggilan fungsi serta-merta untuk menyelesaikan penulisan semula fungsi, iaitu, laksanakan fungsi serta-merta selepas mentakrifkannya. Oleh itu kita tidak perlu mentakrifkan nama fungsi dan penggantian dihalang.

Tatabahasa

Pengguna boleh menggunakan sintaks berikut untuk mengelakkan penggantian dalam JavaScript dengan menggunakan panggilan fungsi segera.

(function () {
   // write JavaScript code here. 
})();

Dalam sintaks di atas, kami telah menambah ungkapan fungsi di dalam kurungan. Selain itu, kami menambah kurungan selepas definisi fungsi untuk memanggil fungsi dengan segera.

Contoh (Cegah fungsi panggilan segera ditindih)

Dalam contoh di bawah, kami mentakrifkan dua fungsi yang dipanggil serta-merta. Dalam setiap fungsi, kami mencipta pembolehubah objek "obj" dan menyimpan sifat id, pengguna dan umur. Selain itu, kami menyimpan fungsi printAge() dalam objek.

Fungsi printAge() kedua-dua objek mencetak mesej berbeza. Selepas itu, kami menyimpan kedua-dua objek ini dalam objek tetingkap untuk mengaksesnya secara global. Akhir sekali, kami melaksanakan kaedah printAge() bagi kedua-dua objek dan pengguna boleh melihat bahawa ia mencetak mesej asal tanpa menimpa satu sama lain.

<html>
<body>
   <h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript
   </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      (function (window) {
         var obj = {};
         obj.id = "123";
         obj.user = "Shubham";
         var age = "Shubham's Age is 23. <br>";
         obj.printAge = function () {
            output.innerHTML += age;
         }
         window.user1 = obj;
      })(window);
      (function (window) {
         var obj = {};
         obj.id = "342";
         obj.user = "Mukund";
         var age = "Mukund's Age is 18. <br>";
         obj.printAge = function () {
            output.innerHTML += age;
         }
         window.user2 = obj;
      })(window);
      user1.printAge();
      user2.printAge();
   </script>
</body>
</html>

Contoh

Dalam contoh ini, kami juga mentakrifkan dua ungkapan fungsi yang dipanggil serta-merta. Dalam ungkapan pertama, kami mentakrifkan objek makanan. Selain itu, kami telah menentukan kaedah setId() dan setName() untuk objek makanan dan menyimpannya dalam objek tetingkap.

Dalam ungkapan fungsi kedua, kami mentakrifkan kaedah setId() dan setName() sekali lagi dan menyimpannya dalam objek watch(). Selepas itu, kami menggunakan jam tangan dan objek makanan sebagai rujukan untuk mengakses kaedah yang berbeza. Dalam output kita dapat melihat bahawa ia mencetak mesej asal tanpa menimpanya.

<html>
<body>
   <h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      (function (window) {
         // preparing food data
         var food = {};
         var setId = function () {
            return Date.now();
         }
         var setName = function () {
            return "Apple";
         }
         window.food = {
            setId: setId(),
            setName: setName()
         };
      })(window);
      (function (window) {
      
         // preparing watch data
         var watch = {};
         var setId = function () {
            return Date.now();
         }
         var setName = function () {
            return "Titan";
         }
         window.watch = {
            setId: setId(),
            setName: setName()
         };
      })(window);
      
      // printing values of object
      output.innerHTML = "Food Id: " + food.setId + "<br/>" + "Food Name: " + food.setName + "<br/>" + "Watch Id: " + watch.setId + "<br/>" + "Watch Name: " + watch.setName;
   </script>
</body>
</html>

Kami belajar menggunakan ungkapan fungsi segera untuk mengelakkan penggantian apabila menggunakan kod JavaScript. Ideanya adalah untuk mentakrifkan pembolehubah dalam skop fungsi dan mengaksesnya secara global melalui objek global tertentu, yang tidak sepatutnya mempunyai sebarang nama yang mengatasi.

Faedah utama menggunakan ungkapan fungsi yang dipanggil serta-merta untuk mengelakkan tiruan adalah untuk mengelakkan pencemaran global nama berubah. Selain itu, ia membolehkan kami menjadikan kod itu boleh diselenggara dan meningkatkan kebolehgunaan semula kod.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan tiruan menggunakan ungkapan fungsi yang dipanggil segera dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 对象作用域

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menetapkan sudut putaran segi empat tepat menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan sudut putaran segi empat tepat menggunakan FabricJS?

Artikel berkaitan

Lihat lagi