Cara menulis kod JS berkualiti tinggi (bersambung)_kemahiran javascript

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

Salin kod Kod adalah seperti berikut:

fungsi hello(nama pengguna){
Kembalikan nama pengguna "hello";
}

2, panggilan kaedah

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

var obj2 = {
Helo: obj.hello(),
Nama pengguna: "floraLam"
};

3, pembina menggunakan

Salin kod Kod adalah seperti berikut:

fungsi Pengguna(nama,kata laluanHash){
This.name = nama;
This.passwordHash = passwordHash;
}

Menggunakan operator baharu untuk memanggil Pengguna dianggap sebagai pembina.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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]

Salin kod Kod adalah seperti berikut:

[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:

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.