Semua rekan web front-end sangat familiar dengan document.getElementById. Selama proses pengembangan, kita sering perlu menggunakannya untuk mendapatkan elemen dengan ID halaman xx. Sejak Prototipe perpustakaan JS veteran menjadi populer, semua orang suka menyingkatnya seperti ini.
Copy kode kodenya sebagai berikut:
// Metode 1
fungsi $(id){ kembalikan dokumen.getElementById(id }
Pernahkah ada yang bertanya-tanya mengapa ditulis seperti ini dan bukan seperti berikut?
Copy kode kodenya sebagai berikut:
// Metode 2
var $ = dokumen.getElementById;
Menulis $ dengan cara ini lebih ringkas dan jelas. Tetapkan metode dokumen getElementById ke variabel $, dan gunakan $ untuk mendapatkan elemen dengan ID halaman xx. Faktanya, metode 2 dapat dilakukan di IE6/7/8 (ada beberapa perubahan di IE9), tetapi tidak di Firefox/Safari/Chrome/Opera. Silakan juga mengujinya sendiri.
Mengapa Firefox/Safari/Chrome/Opera tidak dapat memperolehnya di metode 2? Alasannya adalah implementasi internal metode getElementById di browser ini perlu mengandalkan (dokumen) ini, tetapi IE tidak memerlukannya. Atau dengan kata lain, metode 2 mengatakan bahwa ini hilang saat dipanggil di Firefox/Safari/Chrome/Opera. Berikut ini adalah contoh sederhana.
Copy kode kodenya sebagai berikut:
//Definisikan tampilan fungsi
function show(){alert(ini.nama);}
//Definisikan objek p dengan atribut nama
var p = {nama:'Jack'};
tampilkan.panggilan(p); // -> 'Jack'
tampilkan(); // -> ''
tampilkan.panggilan(null); // -> ''<BR>
Anda dapat melihat bahwa implementasi show bergantung pada ini (sederhananya, ini digunakan dalam badan metode). Oleh karena itu, jika lingkungan pemanggil (konteks eksekusi) tidak memiliki atribut nama, hasil yang diharapkan tidak akan diperoleh.
Dengan kata lain, IE6/7/8 tidak menggunakan ini saat mengimplementasikan document.getElementById, tetapi IE9/Firefox/Safari/Chrome/Opera perlu menggunakan ini, di mana ini adalah objek dokumennya. Ketika metode 2 dipanggil secara langsung, internal this adalah objek window, sehingga metode 2 tidak dapat memperoleh elemen secara normal berdasarkan ID di Firefox/Safari/Chrome/Opera.
Jika Anda mengubah lingkungan eksekusi document.getElementById menjadi document alih-alih window, Anda dapat menggunakan $ secara normal. sebagai berikut
Copy kode kodenya sebagai berikut:
// Perbaiki dokumen.getElementById
dokumen.getElementById = (fungsi(fn){
mengembalikan fungsi(){
return fn.apply(dokumen,argumen);
};
})(dokumen.getElementById);
// Setelah perbaikan, berikan nilai ke $, $ dapat digunakan secara normal.
var $ = dokumen.getElementById;
Sekali lagi, metode pengikatan baru untuk fungsi di ECMAScript5 dapat mencapai efek yang sama.
Copy kode kodenya sebagai berikut:
// Metode 3
var $ = dokumen.getElementById.bind(dokumen);
Namun saat ini metode 3 hanya didukung oleh IE9/Firefox/Chrome/.
Setelah menganalisis situasi getElementById, mudah untuk memahami mengapa metode berikut berbeda di berbagai browser.
Copy kode kodenya sebagai berikut:
var prinf = dokumen.tulis;
prinf('<h3>Test prinf</h3>'); // IE6/7/8 dapat berjalan, browser lain melaporkan kesalahan
var prinfln = dokumen.writeln;
prinfln('<h3>Tes prinfln</h3>'); // IE6/7/8 dapat berjalan, browser lain akan melaporkan kesalahan
var reload = lokasi.reload;
reload(); // IE6/7/8 dapat berjalan, browser lain akan melaporkan kesalahan
var pergi = sejarah.pergi;
go(-2); // IE6/7/8 dapat berjalan, browser lain akan melaporkan kesalahan