Saya pergi untuk wawancara kemarin lusa, dan seorang gg bertanya kepada saya tentang beberapa pengetahuan js. Ada pertanyaan tentang penggunaan panggilan dan penerapan. Meskipun saya telah menggunakan metode panggilan 365 hari yang lalu, saya masih belum bisa menjawabnya pada saat itu. Saya akan merangkumnya secara mendalam hari ini.
memanggil dan menerapkan, fungsinya untuk mengikat fungsi tersebut ke objek lain untuk dijalankan.
Definisi format dan parameter keduanya:
panggilan( thisArg [, arg1, arg2, ... ] ); // Daftar parameter, arg1, arg2, ...
terapkan(Argini[,argArray] ); //array parameter,argArray
Pointer this di dalam dua fungsi di atas akan diberi thisArg, yang dapat mewujudkan tujuan menjalankan fungsi tersebut sebagai metode objek lain.
1. Penggunaan panggilan yang sederhana
Pertama, mari kita lihat contoh sederhana (panggilan):
Copy kode kodenya sebagai berikut:
<!doctypehtml>
<html>
<kepala>
<title> lamaran panggilan </title>
</kepala>
<tubuh>
<input type="teks" id="idTxt" value="input teks">
<skrip tipe="teks/javascript">
var nilai = "var global";
fungsi mFunc()
{
this.value = "anggota var";
}
fungsi gFunc()
{
alert(ini.nilai);
}
window.gFunc();// tampilkan gFunc, var global
gFunc.call(jendela);// tampilkan gFunc, var global
gFunc.call(mFunc baru());// tampilkan mFunc, var anggota
gFunc.call(document.getElementById('idTxt'));// menampilkan elemen, memasukkan teks
</skrip>
<skrip bahasa="javascript">
var func = fungsi baru()
{
this.a = "fungsi";
}
var func2 = fungsi(x)
{
var a = "fungsi2";
alert(ini.a);
peringatan(x);
}
func2.call(func, "func2");// tampilkan fungsi dan fungsi2
</skrip>
</tubuh>
</html>
Kemudian hasil runningnya adalah sebagai berikut:
variabel globalvariabel global
anggota var
masukan teks
fungsi
fungsi2
Lingkungan pengujian: Google Chrome10.0.648.45
Terakhir, analisis hasilnya
1. Jendela objek global memanggil fungsi gFunc, dan ini menunjuk ke objek jendela, jadi nilai ini adalah var global.
2. Fungsi gFunc memanggil metode panggilan. Ini menunjuk ke objek jendela parameter pertama secara default, jadi this.value juga merupakan var global.
3. Fungsi gFunc memanggil metode panggilan. Ini default ke parameter pertama new mFunc(), yang merupakan objek mFunc. Oleh karena itu, this.value adalah variabel anggota mFunc.
4. Fungsi gFunc memanggil metode panggilan. Secara default, ini menunjuk ke kontrol teks masukan parameter pertama, yaitu kontrol dengan id='idTxt'.
5. Fungsi func2 memanggil metode panggilan. Ini default ke objek fungsi fungsi parameter pertama, jadi nilai ini adalah ini.a, yang merupakan fungsi.
6. Fungsi func2 memanggil metode panggilan. Parameter kedua milik parameter objek fungsi func2, jadi alert(x) adalah parameter kedua func2.
2. Panggil penggunaan dan peningkatan warisan
js menggunakan panggilan untuk mensimulasikan warisan
Kode tes:
Copy kode kodenya sebagai berikut:
<!doctypehtml>
<html>
<kepala>
panggilan <title> - mengajukan permohonan untuk mewarisi </title>
</kepala>
<tubuh>
<skrip tipe="teks/javascript">
fungsi baseA()// basis Kelas A
{
this.member = "anggota basisA";
ini.showSelfA = fungsi()
{
window.alert(ini.anggota);
}
}
fungsi baseB()// basis Kelas B
{
this.member = "anggota baseB";
ini.showSelfB = fungsi()
{
window.alert(ini.anggota);
}
}
fungsi extendAB()// Mewarisi Kelas dari A dan B
{
baseA.call(ini);// panggilan untuk A
baseB.call(ini);// panggilan untuk B
}
jendela.onload = fungsi()
{
var extend = new extendAB();
memperpanjang.showSelfA();// tampilkan A
perpanjang.showSelfB();// tampilkan B
}
</skrip>
</tubuh>
</html>
Hasil yang berjalan adalah sebagai berikut:anggota baseB
anggota baseB
Lingkungan pengujian: Google Chrome10.0.648.45
Analisis hasil:
Hasil yang diharapkan adalah keluaran anggota baseA dan anggota baseB, namun keluaran sebenarnya adalah anggota baseB dan anggota baseB.
(Telah diuji di IE9, 8, 6, Maxthon, Chrome, FF, Opera, Safari, 360 dan browser lainnya, dan hasilnya adalah yang terakhir: anggota baseB)
Pada titik ini, mesin tidak salah sehingga mengharuskan kita melakukan analisis mendalam
Kita mungkin dengan mudah berpikir bahwa hal ini disebabkan oleh hal ini. Ini menunjuk ke objek baseB dua kali, tetapi apakah ini benar-benar terjadi?
Untuk menjelajahi esensinya, kami menggunakan alat debugging pada browser Chrome untuk menyetel breakpoint dan debug, dan menemukan bahwa:
Ketika extend.showSelfA(); dipanggil, ini menunjuk ke extendAB (bukan ke objek baseB seperti yang kita spekulasikan dua kali)
Alasan sebenarnya adalah bahwa variabel anggota anggota objek extendAB ditimpa oleh anggota baseB ketika dipakai oleh baseB.call(this);, yaitu, anggota extendAB ditugaskan dari anggota baseA ke anggota baseB.
Tentu saja, kita juga dapat sedikit memodifikasi kode baseA di atas untuk memverifikasi kebenaran analisis debugging kita:
Copy kode kodenya sebagai berikut:
fungsi baseA()// basis Kelas A
{
this.memberA = "anggota baseA"; // anggota diubah menjadi anggota A untuk membedakan anggota di basisB
ini.showSelfA = fungsi()
{
window.alert(ini.anggotaA); // Tampilkan anggotaA
}
}
Jalankan kembali browser seperti chrome, hasilnya sebagai berikut :
anggota pangkalan
anggota baseB
Hasilnya sama dengan ekspektasi kami, dan informasi debug chrome juga memverifikasi kebenaran kami:
Peningkatan warisan (prototipe)
Metode pewarisan simulasi di atas bukanlah yang terbaik setelah dianalisis dengan cermat.
Karena setiap kali metode anggota didefinisikan dalam suatu fungsi (kelas), maka akan menyebabkan salinan instance, sehingga Anda dapat menggunakan prototipe prototipe untuk melakukan perbaikan.
Contoh perbaikannya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<!doctypehtml>
<html>
<kepala>
panggilan <title> - mengajukan permohonan prototipe </title>
</kepala>
<tubuh>
<skrip tipe="teks/javascript">
varKelas = {
buat: fungsi()// buat Fungsi
{
fungsi pengembalian()
{
this.initialize.apply(ini, argumen);
}
}
};
var Orang = Kelas.buat();// Buat Orang Kelas
Person.prototype = {// inisialisasi prototipe
inisialisasi: fungsi (obj1, obj2)
{
ini.obj1 = obj1;
ini.obj2 = obj2;
},
tampilkan Diri: fungsi()
{
alert("obj: " + ini.obj1 + " dan " + ini.obj2);
}
}
// Kelas contoh
var person = new Person("man", "women");// dua parameter
orang.showSelf();// tampilkan orang
</skrip>
</tubuh>
</html>
Hasil yang berjalan adalah sebagai berikut:
objek: pria dan wanita