Menyambung artikel sebelumnya "Cara Menulis Kod JS Berkualiti Tinggi", kali ini saya akan menyusun titik pengetahuan tentang fungsi javascript.
2. Gunakan fungsi
Fungsi menyediakan pengaturcara dengan fungsi abstrak utama dan mekanisme pelaksanaan. Fungsi boleh melaksanakan secara bebas beberapa ciri berbeza dalam bahasa lain, seperti prosedur, kaedah, pembina, dan juga kelas atau modul.
2.1 Memahami perbezaan antara panggilan fungsi, panggilan kaedah dan panggilan pembina
Untuk pengaturcaraan berorientasikan objek, fungsi, kaedah dan pembina kelas ialah tiga konsep yang berbeza.
Mod penggunaan:
1, panggilan fungsi
fungsi hello(nama pengguna){
Kembalikan nama pengguna "hello";
}
2, panggilan kaedah
var obj = {
Helo : function(){
kembalikan "hello," this.username;
},
Nama pengguna: "floraLam"
};
ohj.hello();//"hello , floraLam"
Pembolehubah ini terikat pada objek kerana kaedah helo ditakrifkan dalam objek obj Kami juga boleh menetapkan rujukan fungsi yang sama kepada objek lain dan mendapatkan jawapan yang sama.
var obj2 = {
Helo: obj.hello(),
Nama pengguna: "floraLam"
};
3, pembina menggunakan
fungsi Pengguna(nama,kata laluanHash){
This.name = nama;
This.passwordHash = passwordHash;
}
Menggunakan operator baharu untuk memanggil Pengguna dianggap sebagai pembina.
var u = Pengguna baharu("floraLam","123");
Berbeza daripada panggilan fungsi dan panggilan kaedah, panggilan pembina menggunakan objek baharu sebagai nilai pembolehubah ini dan secara tersirat mengembalikan objek baharu ini sebagai hasil panggilan. Tanggungjawab utama pembina adalah untuk memulakan objek baru ini.
2.2 Mahir dalam fungsi tertib tinggi
Fungsi tertib tinggi tidak lebih daripada fungsi yang mengambil fungsi sebagai parameter atau mengembalikan nilai Mengambil fungsi sebagai parameter (sering dipanggil fungsi panggil balik kerana fungsi tertib tinggi "kemudian memanggilnya" adalah. cara yang sangat berkuasa dan ekspresif untuk Idiom juga digunakan secara meluas dalam program js.
Pertimbangkan kaedah isihan standard untuk tatasusunan Untuk berfungsi untuk semua tatasusunan, kaedah isih memerlukan pemanggil memutuskan cara membandingkan mana-mana dua elemen dalam tatasusunan.
fungsi compareNombor(x,y){
Jika(x < y){
kembali -1;
}
Jika(x > y){
kembali 1;
}
Pulangan 0;
}
[3,1,4,1,5,9].sort(compareNumbers);//[1,1,3,4,5,9]
[3,1,4,1,5,9].sort(fungsi(x,y){
Jika(x < y){
kembali -1;
}
Jika(x > y){
kembali 1;
}
Pulangan 0;
});//[1,1,3,4,5,9]
Contoh di atas dipermudahkan lagi menggunakan fungsi tanpa nama.
Belajar menggunakan fungsi tertib tinggi selalunya memudahkan kod dan menghapuskan kod boilerplate yang membosankan. Kita boleh menggunakan gelung untuk melaksanakan penukaran mudah tatasusunan rentetan:
var names = ["Fred","Wilma","Pebbles"];
var atas = [];
for(var i = 0,n = names.length ;i< n;i ){
upper[i] = nama[i].toUpperCase();
}
atas;//["FRED","WILMA","PEBBLES"];
Menggunakan kaedah peta mudah tatasusunan boleh menghapuskan gelung dan hanya menggunakan fungsi setempat untuk menukar elemen satu demi satu.
var names = ["Fred","Wilma","Pebbles"];
var upper = names.map(function(name){
Kembalikan nama.toUpperCase();
});
atas;//["FRED","WILMA","PEBBLES"];
Selain itu, sebagai contoh, kami ingin mencipta beberapa kaedah untuk mencipta rentetan yang berbeza, dengan logik pelaksanaan biasa, dan setiap gelung mencipta rentetan dengan menggabungkan hasil pengiraan setiap bahagian bebas.
fungsi bulidString(n,panggilan balik){
var result = "";
untuk(var i = 0 ; i < n ;i ){
hasil = panggil balik(i);
}
Pulangan hasil;
}
var alphabet = bulidString(26,function(i){
Kembalikan String.fromCharCode(aIndex i);
});
abjad;//"abcdefghijklmnopqrxtuvwxyz";
var digit = buildString(10,function(i){ return i;})
digit;//"0123456789"
var rawak = buildString(9,function(){
Rawak = String.fromCharCode(Math.floor(Math.random()*26) aIndex
});
rawak;//"yefjmcef"(rawak)
Ini membolehkan pembaca mempunyai pemahaman yang lebih jelas tentang perkara yang boleh dilakukan oleh kod tanpa pergi ke butiran pelaksanaan.
Catatan
javascript mengembalikan formula untuk nombor rawak dalam julat yang ditentukan (antara m-n): Math.random()*(n-m) m
Pada masa yang sama, beri perhatian kepada keperluan soalan dan sama ada ia diperlukan untuk mengembalikan integer positif
2.3 Mod Panggilan
Memanggil fungsi akan menjeda pelaksanaan fungsi semasa dan menghantar kawalan serta parameter kepada fungsi baharu. Sebagai tambahan kepada parameter formal yang ditakrifkan pada pengisytiharan, setiap fungsi menerima dua parameter tambahan baharu: ini dan hujah.
Ini adalah parameter yang sangat penting, dan nilainya ditentukan oleh mod panggilan.
Berikut ialah 4 corak panggilan penting dalam JavaScript:
a. corak seruan kaedah
b. corak seruan fungsi
c. corak seruan pembina
d. Terapkan corak permohonan
Mod ini berbeza dalam cara untuk memulakan parameter utama ini
1. Kaedah kaedah seruan
Apabila fungsi berfungsi sebagai kaedah objek, kami memanggil fungsi itu kaedah. Apabila kaedah dipanggil, ini terikat pada objek panggilan.
var myObj={
val:0,
increment:function(inc){
This.val =typeof inc ==="number" inc:1;
},
Get_val:function(){return this.val;}
}
myObj.increment();// 1
myObj["kenaikan"](2);//3
Ringkasan:
1. Kaedah yang boleh mendapatkan konteks objek yang mereka miliki melalui ini dipanggil kaedah awam
2. Apabila menggunakan . atau ungkapan subskrip untuk menggunakan fungsi, ia adalah mod panggilan kaedah, dan objek ini terikat pada objek sebelumnya.
3. Fungsi boleh menggunakan ini untuk mengakses objek, jadi ia boleh mendapatkan semula nilai objek atau menukar nilai objek. Mengikat ini pada objek berlaku pada masa panggilan.
2. corak seruan fungsi
Apabila fungsi bukan sifat objek, maka ia dipanggil sebagai fungsi. Apabila fungsi dipanggil sebagai mod panggilan fungsi, ini terikat pada objek global. Ini adalah kesilapan reka bentuk dalam JavaScript yang berterusan.
fungsi tambah(x,y){
kembalikan x y;
}
myObj.double=function(){
var that=this;
var helper=function(){
That.val=add(that.value,that.value);
//Cara penulisan yang salah mungkin begini, kenapa salah? Kerana apabila fungsi dipanggil sebagai fungsi dalaman, ini telah terikat pada objek yang salah, dan objek global tidak mempunyai atribut val, jadi nilai yang salah dikembalikan.
//this.val = this.val this.val;
}
penolong();
}
myObj.double();//6
3. corak seruan pembina
JavaScript ialah bahasa berdasarkan warisan prototaip, yang bermaksud objek boleh mewarisi sifat secara langsung daripada objek lain dan bahasa itu tanpa kelas.
Jika anda memanggil fungsi dengan baharu di hadapannya, anda akan mendapat objek baharu yang menyembunyikan ahli prototaip yang disambungkan ke fungsi tersebut, dan ini juga akan terikat pada objek baharu.
Awalan baharu juga mengubah gelagat pernyataan pulangan. Ini juga bukan cara pengaturcaraan yang disyorkan.
var Foo = fungsi(status){
This.status = status;
}
Foo.prototype.get_status = function(){
Kembalikan status ini;
}
//Bina contoh Foo
var myFoo = new Foo("bar");
myFoo.get_status();//"bar"
4. Gunakan corak permohonan
Oleh kerana JavaScript ialah bahasa berorientasikan objek berfungsi, fungsi boleh mempunyai kaedah.
Kaedah Apply mempunyai dua parameter, yang pertama ialah nilai yang akan terikat pada ini, dan yang kedua ialah tatasusunan parameter Dalam erti kata lain, kaedah Apply membolehkan kita membina tatasusunan dan menggunakannya untuk memanggil fungsi , yang membolehkan kami memilih ini Nilai juga membolehkan kami memilih nilai tatasusunan.
tatasusunan var = [3,4];
var sum = add.apply(null,array); // 7
var statusObj = {status:"ABCDEFG"};
Foo.prototype.pro_get_status = fungsi(awalan){
Kembalikan awalan "-" this.status;
}
status var = Foo.prototype.get_status.apply(statusObj);// "ABCDEFG"
var pro_status = Foo.prototype.get_status.apply(statusObj,["prefix"]);// "prefix -ABCDEFG"
Biasanya, penerima fungsi atau kaedah (nilai yang terikat pada kata kunci khas ini) ditentukan oleh sintaks pemanggil. Khususnya, sintaks panggilan kaedah mengikat objek kaedah kepada pembolehubah ini. Walau bagaimanapun, kadangkala perlu menggunakan penerima tersuai untuk memanggil fungsi. Pada masa ini, anda perlu menggunakan kaedah panggilan atau kaedah bind untuk menyesuaikan penerima untuk memanggil kaedah
2.4 Gunakan kaedah bind untuk mengekstrak kaedah dengan penerima yang ditentukan
Memandangkan tiada perbezaan antara kaedah dan sifat yang nilainya adalah fungsi, kaedah objek juga mudah diekstrak dan mengekstrak fungsi sebagai fungsi panggil balik dan menghantarnya terus ke fungsi tertib lebih tinggi.
Tetapi ia juga mudah lupa untuk mengikat penerima fungsi yang diekstrak pada objek dari mana fungsi itu diekstrak.
var penimbal = {
Penyertaan: [],
tambah :function(s){
This.enries.push(s);
}
}
var source = ["867","-","5309"];
source.forEach(butter.add);//error:entry is undefined
Pada masa ini, penerima butter.add bukanlah objek mentega. Penerima fungsi bergantung pada cara ia dipanggil Kaedah forEach dipanggil dalam skop global, jadi pelaksanaan kaedah forEach menggunakan objek global sebagai penerima lalai Oleh kerana tiada atribut entri dalam objek global, ini lontaran kod Ralat telah berlaku.
Kaedah forEach membolehkan pemanggil menyediakan parameter pilihan sebagai penerima fungsi panggil balik.
var source = ["867","-","5309"];
source.forEach(butter.add,butter);
Tetapi tidak semua fungsi tertib tinggi cukup bertimbang rasa untuk menyediakan pengguna dengan penerima fungsi panggil balik.
Terdapat dua penyelesaian:
1) Buat fungsi pembungkus yang secara eksplisit memanggil tambah melalui kaedah objek penimbal. Tidak kira bagaimana fungsi yang dibalut dipanggil, ia sentiasa dijamin untuk menolak parameternya ke dalam tatasusunan sasaran.
var source = ["867","-","5309"];
source.forEach(fungsi(s){
Butter.add(s);
});
2) Kaedah ikatan objek fungsi memerlukan objek penerima dan menjana fungsi pembalut yang memanggil fungsi asal menggunakan panggilan kaedah objek penerima.
var source = ["867","-","5309"];
source.forEach(butter.add.bind(buffer));
Catatan
buffer.add.bind(buffer) mencipta fungsi baharu dan bukannya mengubah suai fungsi buffer.add:
buffer.add === buffer.add.bind(buffer); //false
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
