Lanjutkan dengan artikel sebelumnya "Cara Menulis Kode JS Berkualitas Tinggi" Kali ini saya akan memilah-milah poin pengetahuan dari fungsi JavaScript.
2. Gunakan fungsi
Fungsi memberikan pemrogram dengan fungsi abstrak utama dan mekanisme implementasi. Fungsi dapat secara mandiri mengimplementasikan beberapa fitur berbeda dalam bahasa lain, seperti prosedur, metode, konstruktor, dan bahkan kelas atau modul.
2.1 Memahami perbedaan antara panggilan fungsi, panggilan metode dan panggilan konstruktor
Untuk pemrograman yang berorientasi objek, konstruktor fungsi, metode, dan kelas adalah tiga konsep yang berbeda.
Mode Penggunaan:
1. Panggilan fungsi
Salinan kode adalah sebagai berikut:
fungsi halo (nama pengguna) {
Kembalikan "Halo" + Nama Pengguna;
}
2. Panggilan metode
Salinan kode adalah sebagai berikut:
var obj = {
halo: function () {
kembalikan "halo," + this.username;
},
Nama pengguna: "Floralam"
};
ohj.hello (); // "halo, floralam"
Variabel ini terikat pada objek karena metode Hello didefinisikan dalam objek OBJ. Kami juga dapat menetapkan salinan referensi fungsi yang sama di objek lain dan mendapatkan jawaban yang sama.
Salinan kode adalah sebagai berikut:
var obj2 = {
halo: obj.hello (),
Nama pengguna: "Floralam"
};
3. Gunakan konstruktor
Salinan kode adalah sebagai berikut:
Pengguna Fungsi (Nama, PasswordHash) {
this.name = name;
this.passwordhash = kata sandi;
}
Memanggil pengguna menggunakan operator baru dianggap sebagai konstruktor.
Salinan kode adalah sebagai berikut:
var u = pengguna baru ("floralam", "123");
Tidak seperti panggilan fungsi dan panggilan metode, panggilan konstruktor mengambil objek yang sama sekali baru sebagai nilai variabel ini dan secara implisit mengembalikan objek baru ini sebagai hasil panggilan. Tanggung jawab utama konstruktor adalah menginisialisasi objek baru.
2.2 Mahir dalam Fungsi Lanjutan
Fungsi tingkat tinggi tidak lebih dari fungsi yang mengambil fungsi sebagai parameter atau nilai pengembalian, dan menggunakan fungsi sebagai parameter (biasanya disebut fungsi callback, karena fungsi tingkat tinggi "selanjutnya menyebut" itu) adalah idiom yang sangat kuat dan ekspresif, dan juga banyak digunakan dalam program JS.
Pertimbangkan metode array sortir standar. Untuk bekerja untuk semua array, metode sortir mengharuskan penelepon untuk memutuskan bagaimana membandingkan dua elemen dalam array.
Salinan kode adalah sebagai berikut:
Function CompareNumber (x, y) {
if (x <y) {
kembali -1;
}
if (x> y) {
kembali 1;
}
kembali 0;
}
[3,1,4,1,5,9] .Sort (Comparenumbers); // [1,1,3,4,5,9]
Salinan kode adalah sebagai berikut:
[3,1,4,1,5,9] .sort (function (x, y) {
if (x <y) {
kembali -1;
}
if (x> y) {
kembali 1;
}
kembali 0;
}); // [1,1,3,4,5,9]
Contoh di atas menggunakan fungsi anonim untuk lebih menyederhanakan.
Belajar menggunakan fungsi tingkat tinggi sering dapat menyederhanakan kode dan menghilangkan kode boilerplate yang membosankan. Untuk konversi array string yang sederhana, kami dapat menggunakan loop untuk mengimplementasikannya seperti ini:
Salinan kode adalah sebagai berikut:
var name = ["fred", "Wilma", "Pebbles"];
var atas = [];
untuk (var i = 0, n = names.length; i <n; i ++) {
Upper [i] = nama [i] .tuppercase ();
}
Upper; // ["Fred", "Wilma", "Pebbles"];
Dengan menggunakan metode array peta yang nyaman, Anda dapat menghilangkan loop dan mengonversi elemen satu per satu menggunakan hanya satu fungsi lokal.
Salinan kode adalah sebagai berikut:
var name = ["fred", "Wilma", "Pebbles"];
var atas = names.map (function (name) {
return name.touppercase ();
});
Upper; // ["Fred", "Wilma", "Pebbles"];
Selain itu, misalnya, kami ingin membuat beberapa metode untuk membuat string yang berbeda dengan logika implementasi umum, dan setiap loop membuat string dengan menghubungkan hasil perhitungan dari setiap bagian independen.
Salinan kode adalah sebagai berikut:
function bulidstring (n, callback) {
var result = "";
untuk (var i = 0; i <n; i ++) {
hasil += callback (i);
}
hasil pengembalian;
}
var alphabet = bulidstring (26, function (i) {
return string.fromCharCode (aIndex + i);
});
Alphabet; // "ABCDEFGHIJKLMNOPQRXTUVWXYZ";
var digit = buildString (10, function (i) {return i;})
digit; // "0123456789"
var random = buildString (9, function () {
acak += string.fromCharCode (math.floor (math.random ()*26) +aIndex
});
acak; // "yefjmcef" (acak)
Ini akan memberi pembaca pemahaman yang lebih jelas tentang apa yang dapat dilakukan kode tanpa detail implementasi yang mendalam.
Komentar
JavaScript mengembalikan rumus untuk angka acak (antara Mns) dari rentang yang ditentukan: Math.random ()*(nm)+m
Pada saat yang sama, perhatikan persyaratan pertanyaan dan apakah diperlukan untuk mengembalikan bilangan bulat positif.
2.3 Mode Panggilan
Memanggil fungsi akan menjeda pelaksanaan fungsi saat ini dan lulus hak kontrol dan parameter ke fungsi baru. Selain parameter formal yang ditentukan pada saat deklarasi, setiap fungsi menerima dua parameter tambahan baru: ini dan argumen.
Ini adalah parameter yang sangat penting, dan nilainya ditentukan oleh pola panggilan.
Berikut adalah 4 pola panggilan yang sangat penting dalam JavaScript:
A. Metode Pola Doa
B. Pola doa fungsi
C. Pola doa konstruktor
D. Terapkan Pola Panggilan Pola Doa Terapkan
Ada perbedaan dalam bagaimana pola -pola ini menginisialisasi parameter kunci ini
1. Metode Doa Metode
Ketika suatu fungsi adalah metode suatu objek, kami menyebutnya metode. Ketika metode dipanggil, ini terikat pada objek yang dipanggil.
Salinan kode adalah sebagai berikut:
var myobj = {
Val: 0,
increment: function (inc) {
this.val+= typeof inc === "angka"? Inc: 1;
},
get_val: function () {return this.val;}
}
myobj.increment (); // 1
myobj ["increment"] (2); // 3
ringkasan:
1. Metode di mana konteks objek tempat mereka dapat diperoleh melalui ini disebut metode publik
2. Saat menggunakan fungsi dengan a. atau ekspresi subscript, itu adalah mode panggilan metode, dan objek ini terikat pada objek sebelumnya.
3. Fungsi dapat menggunakan ini untuk mengakses objek, sehingga dapat mengambil nilai objek atau mengubah nilai objek. Bind ini ke objek terjadi saat dipanggil.
2. Pola doa fungsi
Ketika suatu fungsi bukan properti objek, itu disebut sebagai fungsi. Ketika suatu fungsi disebut sebagai pola panggilan fungsi, ini terikat pada objek global. Ini adalah kesalahan desain JavaScript dan berlanjut.
Salinan kode adalah sebagai berikut:
fungsi add (x, y) {
mengembalikan x+y;
}
myobj.double = function () {
var itu = ini;
var helper = function () {
itu.val = add (that.value, that.value);
// Cara menulis yang salah mungkin seperti ini, mengapa itu salah? Karena ketika fungsi disebut sebagai fungsi internal, ini telah terikat pada objek yang salah, dan objek global tidak memiliki properti val, sehingga nilai yang salah dikembalikan.
//this.val = this.val+this.val;
}
pembantu();
}
myobj.double (); // 6
3. Pola Doa Konstruktor
JavaScript adalah bahasa berdasarkan prototipe warisan, yang berarti bahwa objek dapat secara langsung mewarisi atribut dari objek lain, dan bahasa tidak berkelas.
Jika Anda memanggil fungsi dengan yang baru, Anda akan mendapatkan objek baru yang menyembunyikan anggota prototipe yang terhubung ke fungsi, dan ini juga akan terikat pada objek baru.
Awalan baru juga mengubah perilaku pernyataan pengembalian. Ini juga bukan metode pemrograman yang disarankan.
Salinan kode adalah sebagai berikut:
var foo = function (status) {
this.status = status;
}
Foo.prototype.get_status = function () {
kembalikan ini.status;
}
// Bangun contoh foo
var myfoo = foo baru ("bar");
myfoo.get_status (); // "bar"
4. Terapkan Panggilan Pola Pola Doa Terapkan
Karena JavaScript adalah bahasa yang berorientasi objek fungsional, fungsi dapat memiliki metode.
Metode Apply memiliki dua parameter. Yang pertama adalah mengikat nilainya, dan yang kedua adalah array parameter. Dengan kata lain, metode Apply memungkinkan kami untuk membangun array dan menggunakannya untuk memanggil fungsi, yang memungkinkan kami untuk memilih nilai ini dan juga memungkinkan kami untuk memilih nilai array.
Salinan kode adalah sebagai berikut:
var array = [3,4];
var sum = add.Apply (null, array); // 7
var statusobj = {status: "abcdefg"};
Foo.prototype.pro_get_status = function (awalan) {
Kembali awalan +"-" +this.status;
}
var status = foo.prototype.get_status.apply (statusobj); // "abcdefg"
var pro_status = foo.prototype.get_status.apply (statusobj, ["prefix"]); // "prefix -abcdefg"
Biasanya, penerima fungsi atau metode (level terikat ke nilai kata kunci khusus ini) ditentukan oleh sintaks penelepon. Secara khusus, sintaks panggilan metode mengikat metode pada variabel ini dengan objek pencarian. Namun, kadang -kadang perlu untuk memanggil fungsi menggunakan penerima khusus. Saat ini, Anda perlu menggunakan metode panggilan atau mengikat metode untuk menyesuaikan penerima untuk memanggil metode
2.4 Metode Ekstrak dengan Menentukan Penerima Menggunakan Metode BIND
Karena metode ini tidak berbeda dari atribut yang nilainya berfungsi, juga mudah untuk mengekstrak metode objek dan mengekstrak fungsi sebagai fungsi callback dan meneruskannya langsung ke fungsi tingkat tinggi.
Tetapi juga mudah untuk lupa untuk mengikat fungsi yang diekstraksi ke objek yang diekstraksi.
Salinan kode adalah sebagai berikut:
var buffer = {
Entri: [],
Tambahkan: function {
this.entries.push (s);
}
}
var source = ["867", "-", "5309"];
Source.foreach (Butter.Add); // Kesalahan: Entri tidak ditentukan
Pada saat ini, penerima mentega.add bukan objek mentega. Penerima fungsi tergantung pada bagaimana itu disebut, dan metode foreach disebut dalam ruang lingkup global, sehingga implementasi metode foreach menggunakan objek global sebagai penerima default. Karena tidak ada atribut entri dalam objek global, kode ini melakukan kesalahan.
Metode foreach memungkinkan penelepon untuk memberikan parameter opsional sebagai penerima fungsi callback.
Salinan kode adalah sebagai berikut:
var source = ["867", "-", "5309"];
Source.foreach (Butter.Add, Butter);
Tetapi tidak semua fungsi tingkat tinggi hati-hati dan bijaksana untuk memberi pengguna penerima fungsi callback.
Ada dua solusi:
1) Buat metode objek buffer eksplisit untuk memanggil fungsi enkapsulasi tambahkan. Terlepas dari bagaimana fungsi enkapsulasi disebut, selalu memastikan bahwa parameternya didorong ke dalam array target.
Salinan kode adalah sebagai berikut:
var source = ["867", "-", "5309"];
Source.foreach (function (s) {
butter.add (s);
});
2) Metode BIND dari objek fungsi memerlukan objek penerima dan menghasilkan fungsi enkapsulasi yang memanggil fungsi asli dengan metode yang dipanggil oleh objek penerima.
Salinan kode adalah sebagai berikut:
var source = ["867", "-", "5309"];
Source.foreach (Butter.Add.Bind (buffer));
Komentar
buffer.add.bind (buffer) membuat fungsi baru alih -alih memodifikasi fungsi buffer.add:
buffer.add === buffer.add.bind (buffer); //PALSU
Di atas adalah semua tentang artikel ini, saya harap Anda menyukainya.