Artikel ini memperkenalkan metode dan prinsip berbagai panggilan fungsi dalam JavaScript secara rinci, yang sangat membantu untuk memahami fungsi JavaScript!
JavaScript, 5 cara untuk memanggil fungsi
Berkali-kali, saya menemukan bahwa kode JavaScript bebas bug disebabkan oleh tidak benar-benar memahami bagaimana fungsi JavaScript bekerja (omong-omong, banyak kode itu ditulis oleh saya). JavaScript memiliki sifat pemrograman fungsional, yang akan menjadi penghalang kemajuan kita ketika kita memilih untuk menghadapinya.
Sebagai pemula, mari kita uji lima panggilan fungsi. Dari permukaan kita akan berpikir bahwa fungsi -fungsi itu sangat mirip dengan yang ada di C#, tetapi kita dapat melihat bahwa masih ada perbedaan yang sangat penting di masa depan. Mengabaikan perbedaan-perbedaan ini tidak diragukan lagi akan mengarah pada bug yang sulit dilacak. Pertama mari kita buat fungsi sederhana, yang akan digunakan di bawah ini, dan fungsi ini hanya mengembalikan nilai saat ini dari ini dan dua parameter yang disediakan.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
fungsi makearray (arg1, arg2) {
kembalikan [ini, arg1, arg2];
}
</script>
Metode yang paling umum digunakan, tetapi sayangnya, panggilan fungsi global
Ketika kita belajar JavaScript, kita belajar cara mendefinisikan fungsi menggunakan sintaks dalam contoh di atas.
, Kita juga tahu bahwa menyebut fungsi ini sangat sederhana, dan yang perlu kita lakukan adalah:
Salinan kode adalah sebagai berikut:
Makearray ('One', 'Two');
// => [jendela, 'satu', 'dua']
Tunggu sebentar. Jendela apa itu
waspada (typeof window.methodthatdoesntexist);
// => tidak terdefinisi
peringatan (typeof window.makeArray);
// =>
window.makearray ('satu', 'dua');
// => [jendela, 'satu', 'dua']
Saya mengatakan metode panggilan yang paling umum sangat disayangkan karena menyebabkan fungsi yang kami nyatakan global secara default. Kita semua tahu bahwa anggota global bukanlah praktik terbaik untuk pemrograman. Ini sangat benar dalam JavaScript. Anda tidak akan menyesal menghindari anggota global di JavaScript.
Fungsi JavaScript aturan panggilan 1
Dalam fungsi yang tidak dipanggil secara langsung oleh objek pemilik eksplisit, seperti myfunction (), akan menyebabkan nilai ini menjadi objek default (jendela di browser).
Panggilan Fungsi
Mari kita buat objek sederhana sekarang, gunakan fungsi MakeArray sebagai metodenya. Kami akan menggunakan metode JSON untuk mendeklarasikan suatu objek, dan kami juga akan memanggil metode ini
Salinan kode adalah sebagai berikut:
// Membuat objek
var arraymaker = {
Someproperty: 'beberapa nilai di sini',
Buat: Makearray
};
// memohon metode make ()
arraymaker.make ('satu', 'dua');
// => [pembuat array, 'satu', 'dua']
// Sintaks alternatif, menggunakan tanda kurung persegi
ArrayMaker ['Make'] ('One', 'Two');
// => [pembuat array, 'satu', 'dua']
Lihat perbedaan di sini, nilai ini menjadi objek itu sendiri. Anda mungkin bertanya -tanya mengapa definisi fungsi asli tidak berubah, mengapa itu bukan jendela. Nah, beginilah fungsi disahkan di JSAVAR. Fungsi adalah tipe data standar dalam JavaScript, atau tepatnya, suatu objek. Anda dapat meneruskannya atau menyalinnya. Seolah -olah seluruh fungsi dan daftar parameter dan badan fungsi disalin dan ditugaskan ke properti yang dibuat di arraymaker, jadi itu seperti mendefinisikan pembuat array seperti ini:
Salinan kode adalah sebagai berikut:
var arraymaker = {
Someproperty: 'beberapa nilai di sini',
Make: function (arg1, arg2) {
kembalikan [ini, arg1, arg2];
}
};
Aturan panggilan fungsi javascript 2
Dalam metode panggilan sintaks, seperti obj.myfunction () atau obj ['myfunction'] (), nilai ini adalah obj
Ini adalah sumber utama bug dalam kode penanganan acara. Lihatlah contoh -contoh ini
Salinan kode adalah sebagai berikut:
<input type = "tombol" value = "tombol 1" id = "btn1" />
<input type = "tombol" value = "tombol 2" id = "btn2" />
<input type = "tombol" value = "tombol 3" id = "btn3" onclick = "buttonClicked ();"/>>
<type skrip = "Teks/JavaScript">
function buttonClicked () {
var text = (this === jendela)? 'Window': this.id;
waspada (teks);
}
var button1 = document.geteLementById ('btn1');
var button2 = document.geteLementById ('btn2');
Button1.onClick = ButtonClicked;
tombol2.onClick = function () {buttonClicked (); };
</script>
Mengklik tombol pertama akan menampilkan "BTN" karena itu adalah panggilan metode, ini adalah objek yang menjadi miliknya (elemen tombol). Mengklik tombol kedua akan menampilkan "window" karena ButtonClicked dipanggil secara langsung (tidak seperti obj.buttonklicked ().) Ini sama dengan tombol ketiga kami, yang menempatkan fungsi penanganan acara secara langsung di label. Jadi hasil mengklik tombol ketiga sama dengan yang kedua.
Menggunakan perpustakaan JS seperti JQuery memiliki keuntungan. Ketika penangan acara didefinisikan dalam jQuery, perpustakaan JS akan membantu mengesampingkan nilai ini untuk memastikan bahwa itu berisi referensi ke elemen sumber acara saat ini.
Salinan kode adalah sebagai berikut:
// Gunakan jQuery
$ ('#btn1'). Klik (function () {
waspada (this.id); // jQuery memastikan 'ini' akan menjadi tombolnya
});
Bagaimana jQuery membebani nilai ini? Lanjutkan membaca
Dua lainnya: apply () dan call ()
Semakin banyak Anda menggunakan fungsi JavaScript, semakin banyak Anda menemukan bahwa Anda perlu melewati fungsi dan memanggilnya dalam konteks yang berbeda. Sama seperti yang dilakukan Qjuery dalam fungsi penanganan acara, Anda sering perlu mengatur ulang nilai ini. Ingat apa yang saya katakan, dalam fungsi JavaScript juga merupakan objek. Objek fungsi berisi beberapa metode yang telah ditentukan, dua di antaranya berlaku () dan call (), yang dapat kita gunakan untuk mengatur ulang ini.
Salinan kode adalah sebagai berikut:
var gasguzzler = {tahun: 2008, model: 'dodge bailout'};
Makearray.Apply (GasGuzzler, ['One', 'Two']);
// => [GasGuzzler, 'One', 'Two']
Makearray.call (GasGuzzler, 'One', 'Two');
// => [GasGuzzler, 'One', 'Two']
Kedua metode ini serupa, perbedaannya adalah perbedaan dalam parameter berikut. Function.apply () menggunakan array untuk meneruskan ke fungsi, sementara function.call () melewati parameter ini secara mandiri. Dalam praktiknya, Anda akan menemukan bahwa Apply () lebih nyaman dalam banyak kasus.
Aturan panggilan fungsi jsavarscript 3
Jika kita ingin membebani nilai ini tanpa menyalin fungsi ke suatu metode, kita dapat menggunakan myfunction.apply (obj) atau myfunction.call (obj).
Konstruktor
Saya tidak ingin menggali definisi tipe dalam JavaScript, tetapi pada saat ini kita perlu tahu bahwa tidak ada kelas dalam JavaScript, dan jenis kustom apa pun memerlukan fungsi inisialisasi. Ini juga merupakan ide yang baik untuk menentukan tipe Anda menggunakan objek prototipe (sebagai properti dari fungsi inisialisasi). Mari Buat Jenis Sederhana
Salinan kode adalah sebagai berikut:
// Nyatakan konstruktor
fungsi arraymaker (arg1, arg2) {
this.someproperty = 'apapun';
this.thearray = [ini, arg1, arg2];
}
// Deklarasikan metode instantiasi
Arraymaker.prototype = {
somemethod: function () {
waspada ('somemethod dipanggil');
},
getArray: function () {
kembalikan ini.theArray;
}
};
var am = new arraymaker ('one', 'two');
var lainnya = new arraymaker ('pertama', 'kedua');
am.getArray ();
// => [am, 'satu', 'dua']
Salah satu yang sangat penting dan penting adalah operator baru yang muncul di depan panggilan fungsi. Tanpa itu, fungsi Anda seperti fungsi global, dan properti yang kami buat akan dibuat pada objek global (jendela), dan Anda tidak ingin melakukannya. Topik lain adalah karena tidak ada nilai pengembalian dalam konstruktor Anda, jika Anda lupa menggunakan operator baru, beberapa variabel Anda akan diberikan tidak ditentukan. Karena alasan ini, adalah kebiasaan yang baik untuk memulai dengan huruf kapital. Ini dapat digunakan sebagai pengingat untuk tidak melupakan operator baru sebelumnya saat menelepon.
Dengan hati -hati seperti itu, kode dalam fungsi inisialisasi mirip dengan fungsi inisialisasi yang Anda tulis dalam bahasa lain. Nilai ini akan menjadi objek yang akan Anda buat.
Fungsi JavaScript aturan panggilan 4
Saat Anda menggunakan fungsi sebagai fungsi inisialisasi, seperti myFunction (), JavaScript Runtime akan menentukan nilai ini sebagai objek yang baru dibuat.
Saya berharap bahwa memahami perbedaan dalam berbagai fungsi metode panggilan akan menjauhkan kode SjavaScript Anda dari bug, dan beberapa bug tersebut akan memastikan Anda selalu tahu bahwa nilai ini adalah langkah pertama untuk menghindarinya.