5 cara untuk memanggil fungsi dalam kemahiran JavaScript_javascript

Artikel ini memperkenalkan secara terperinci kaedah dan prinsip pelbagai panggilan fungsi dalam JavaScript, yang sangat membantu untuk memahami fungsi JavaScript!

JavaScript, 5 cara untuk memanggil fungsi

Berkali-kali, saya mendapati bahawa kod JavaScript buggy adalah hasil daripada tidak benar-benar memahami cara fungsi JavaScript berfungsi (saya menulis banyak kod itu, dengan cara itu JavaScript memiliki ciri pengaturcaraan berfungsi, apabila kita memilih untuk menghadapinya). itu, ia akan menjadi penghalang kepada kemajuan kami

Sebagai seorang pemula, mari kita uji lima kaedah panggilan fungsi Di permukaan, kita akan berfikir bahawa fungsi-fungsi tersebut sangat serupa dengan fungsi dalam C#, tetapi kita akan melihat sebentar lagi bahawa masih terdapat perbezaan yang sangat penting. Mengabaikan perbezaan ini sudah pasti akan membawa kepada ,sukar untuk mengesan pepijat. Mula-mula mari kita buat fungsi mudah, yang akan digunakan di bawah Fungsi ini hanya mengembalikan nilai semasa ini dan dua parameter yang disediakan

Salin kod Kod adalah seperti berikut: function makeArray(arg1, arg2){ Kembalikan [ ini, arg1, arg2 ]; }

Kaedah yang paling biasa digunakan, tetapi malangnya, panggilan fungsi global Apabila kami mempelajari Javascript, kami belajar cara mentakrifkan fungsi menggunakan sintaks dalam contoh di atas. , kami juga tahu bahawa memanggil fungsi ini adalah sangat mudah, yang perlu kami lakukan ialah:

Salin kod Kod adalah seperti berikut: makeArray('satu', 'dua'); // => [ tetingkap, 'satu', 'dua' ]

Tunggu sebentar

alert( typeof window.methodThatDoesntExist ); // => tidak ditentukan alert(typeof window.makeArray); // ==>

window.makeArray('satu', 'dua'); // => [ tetingkap, 'satu', 'dua' ]

Saya katakan kaedah panggilan yang paling biasa adalah malang kerana ia menyebabkan fungsi yang kami isytiharkan sebagai global secara lalai. Kita semua tahu bahawa ahli global bukanlah amalan terbaik dalam pengaturcaraan ahli global, anda tidak akan menyesal. Peraturan panggilan fungsi JavaScript 1

Dalam fungsi yang dipanggil terus tanpa objek pemilik yang jelas, seperti myFunction(), nilai ini akan menyebabkan nilai ini menjadi objek lalai (tetingkap dalam penyemak imbas). Panggilan fungsi

Mari kita cipta objek ringkas sekarang, menggunakan fungsi makeArray sebagai salah satu kaedahnya. Kami akan menggunakan json untuk mengisytiharkan objek, dan kami juga akan memanggil kaedah ini

Salin kod Kod adalah seperti berikut: //membuat objek var arrayMaker = { SomeProperty: 'sesetengah nilai di sini', Buat: makeArray };

//mengamalkan kaedah make() arrayMaker.make('satu', 'dua'); // => [ arrayMaker, 'satu', 'dua' ] // sintaks alternatif, menggunakan kurungan segi empat sama arrayMaker['make']('one', 'two'); // => [ arrayMaker, 'satu', 'dua' ]

Lihat perbezaan di sini, nilai ini menjadi objek itu sendiri Anda mungkin tertanya-tanya mengapa definisi fungsi asal tidak berubah, mengapa ia bukan tetingkap Nah, ini adalah fungsi yang diluluskan dalam JSavacript Dengan cara ini. fungsi ialah jenis data standard dalam JavaScript, objek yang tepat Anda boleh menghantarnya atau menyalinnya Ia seperti keseluruhan fungsi dengan senarai parameter dan badan fungsi disalin dan diberikan kepada pembuatan Atribut arrayMaker, kemudian tentukan. arrayMaker seperti ini:

Salin kod Kod adalah seperti berikut: var arrayMaker = { SomeProperty: 'sesetengah nilai di sini', Buat: fungsi (arg1, arg2) { kembali [ ini, arg1, arg2 ]; } };

Peraturan panggilan fungsi JavaScript 2

Dalam sintaks panggilan kaedah, seperti obj.myFunction() atau obj['myFunction'](), nilai ini ialah obj

Ini ialah sumber utama pepijat dalam kod pengendalian acara, lihat contoh ini

Salin kod Kod adalah seperti berikut:

butang fungsi Diklik(){ var text = (this === window) ? 'window' : this.id; makluman( teks ); } var button1 = document.getElementById('btn1'); var button2 = document.getElementById('btn2');

button1.onclick = butangClicked; button2.onclick = function(){ buttonClicked( }; Mengklik butang pertama akan memaparkan "btn" kerana ia adalah panggilan kaedah, dan ini adalah objek (elemen butang) yang dimilikinya. Mengklik butang kedua akan memaparkan "tetingkap" kerana butang yang Diklik dipanggil terus (tidak seperti obj. buttonClicked().) Ini adalah sama dengan butang ketiga kami, meletakkan fungsi pengendali acara secara langsung dalam label Jadi hasil daripada mengklik butang ketiga adalah sama dengan yang kedua Menggunakan perpustakaan JS seperti jQuery mempunyai kelebihan apabila fungsi pengendalian acara ditakrifkan dalam jQuery, perpustakaan JS akan membantu menulis semula nilai ini untuk memastikan ia mengandungi rujukan kepada elemen sumber peristiwa semasa,

Salin kod Kod adalah seperti berikut: //Gunakan jQuery $('#btn1').klik( function() { alert( this.id ); // jQuery memastikan 'ini' akan menjadi butang });

Bagaimanakah jQuery membebankan nilai ini? Teruskan membaca Dua yang lain: apply() dan call()

Semakin banyak anda menggunakan fungsi JavaScript, semakin banyak anda mendapati bahawa anda perlu lulus fungsi dan memanggilnya dalam konteks yang berbeza, sama seperti Qjuery lakukan dalam pengendali acara, dan anda sering perlu menetapkan semula Nilai ini anda, fungsi juga objek dalam Javascript objek mengandungi beberapa kaedah yang telah ditetapkan, dua daripadanya adalah apply() dan call().

Salin kod Kod adalah seperti berikut: var gasGuzzler = { tahun: 2008, model: 'Dodge Bailout' }; makeArray.apply( gasGuzzler, [ 'satu', 'dua' ] ); // => [ gasGuzzler, 'satu' , 'dua' ] makeArray.call( gasGuzzler, 'satu', 'dua' ); // => [ gasGuzzler, 'satu' , 'dua' ]

Kedua-dua kaedah adalah serupa Perbezaannya adalah dalam parameter berikut Function.apply() menggunakan tatasusunan untuk dihantar ke fungsi, manakala Function.call() menghantar parameter ini secara bebas. ) adalah lebih mudah dalam kebanyakan kes.

Peraturan panggilan fungsi JSavacript 3 Jika kita ingin membebankan nilai ini tanpa menyalin fungsi ke kaedah, kita boleh menggunakan myFunction.apply( obj ) atau myFunction.call( obj ).

Pembina

Saya tidak mahu menyelidiki definisi jenis dalam Javascript, tetapi pada masa ini kita perlu tahu bahawa tiada kelas dalam Javascript, dan mana-mana jenis tersuai memerlukan fungsi permulaan, yang ditakrifkan menggunakan objek prototaip (seperti atribut fungsi permulaan) Jenis anda juga merupakan isme yang bagus, mari buat jenis mudah

Salin kod Kod adalah seperti berikut: //Isytiharkan pembina fungsi ArrayMaker(arg1, arg2) { This.someProperty = 'whatever'; This.theArray = [ ini, arg1, arg2 ]; } // Isytihar kaedah instantiasi ArrayMaker.prototype = { SomeMethod: fungsi () { alert( 'someMethod called'); }, GetArray: fungsi () { kembalikan this.theArray; } };

var am = ArrayMaker baharu( 'satu', 'dua' ); var other = new ArrayMaker( 'first', 'second' );

am.getArray(); // => [ am, 'satu' , 'dua' ]

Perkara yang sangat penting dan patut diberi perhatian ialah operator baharu yang muncul sebelum panggilan fungsi Tanpa itu, fungsi anda adalah seperti fungsi global, dan sifat yang kami cipta akan dibuat pada objek global (tetingkap) , dan anda. tidak mahu itu, topik lain ialah kerana tiada nilai pulangan dalam pembina anda, jika anda terlupa menggunakan operator baharu, ia akan menyebabkan beberapa pembolehubah anda ditetapkan tidak ditentukan Atas sebab ini, fungsi pembina Ia adalah tabiat yang baik untuk memulakan dengan huruf besar, yang boleh berfungsi sebagai peringatan untuk tidak melupakan operator baharu yang terdahulu apabila memanggil

Dengan berhati-hati ini, kod dalam fungsi permulaan adalah serupa dengan fungsi permulaan yang anda tulis dalam bahasa lain Nilai ini akan menjadi objek yang akan anda cipta.

Peraturan panggilan fungsi JavaScript 4

Apabila anda menggunakan fungsi sebagai fungsi permulaan, seperti MyFunction(), masa jalan Javascript akan memberikan nilai ini kepada objek yang baru dibuat.

Saya harap memahami perbezaan dalam cara pelbagai fungsi dipanggil akan menjauhkan kod JavaScript anda daripada pepijat, dan memastikan anda sentiasa mengetahui nilai ini adalah langkah pertama untuk mengelakkannya.