Saat menggunakan JavaScript, orang sering bingung oleh orang ini. Untuk sebagian besar pengembang dengan pengalaman pengembangan OOP, ini adalah pengidentifikasi yang merujuk elemen -elemen biasa dalam ruang lingkup saat ini, tetapi dalam JavaScript tampaknya unik karena tidak diperbaiki, tetapi berubah seiring perubahan lingkungan eksekusi. Dalam JavaScript ini selalu menunjuk pada objek yang menyebut metode itu terletak.
Mari berikan contoh sederhana:
Salinan kode adalah sebagai berikut:
function test () {
waspada (ini);
}
var obj = function () {
var name = 'testObj';
}
obj.objtest = tes;
tes();
obj.objtest ();
Masukkan kode ini ke dalam HTML dan jalankan halaman ini, Anda akan melihat [jendela objek] peringatan terlebih dahulu, dan kemudian peringatan.
Salinan kode adalah sebagai berikut:
var obj = function () {
var name = 'testObj';
}
Kami pertama -tama mendefinisikan metode test (), memanggil metode peringatan () di dalam metode untuk menampilkan ini, kemudian mendefinisikan objek fungsi OBJ, menambahkan nama bidang pribadi ke dalamnya, dan menambahkan metode statis objTest () ke dalamnya, dan fungsi ini secara langsung menunjuk ke fungsi test ().
Metode test () dan obj.objtest () masing -masing disebut. Kotak peringatan pertama meminta objek jendela, dan prompt kedua adalah kode fungsi OBJ yang kami tentukan. Ini menunjukkan bahwa nilai ini berbeda ketika fungsi tes dieksekusi dua kali!
Ini menunjukkan bahwa ketika objek yang memanggil fungsi berbeda, objek yang dirujuk oleh kata kunci ini di dalamnya berbeda. Perlu dicatat di sini bahwa JavaScript adalah bahasa berbasis objek. Ketika definisi variabel atau fungsi kami adalah root dari tag <script> </ptript>, itu sebenarnya setara dengan menambahkan properti atau metode yang sesuai ke objek jendela. Oleh karena itu, ketika kami menggunakan fungsi test () {} kode untuk mendefinisikan fungsi, sebenarnya setara dengan menambahkan fungsi baru ke objek jendela, yaitu fungsi window.test ().
Kita bisa melakukan percobaan:
Salinan kode adalah sebagai berikut:
function test () {
waspada (ini);
}
peringatan (test === window.test);
Kotak peringatan meminta true, yang berarti bahwa ketika kita memanggil fungsi test (), itu setara dengan panggilan window.test (). Jadi ketika kita memanggil fungsi test (), objek yang memanggil fungsi ini sebenarnya adalah objek jendela, ini mengacu pada objek jendela, sehingga konten jendela peringatan yang kita muncul saat waspada (ini) adalah [jendela objek]. Kami menunjuk obj.objtest = tes untuk menunjukkan obj.objtest () ke test (), jadi ketika kita memanggil fungsi obj.objtest (), itu setara dengan memanggil fungsi tes () dalam OBJ. Jadi sekarang ini mengacu pada objek OBJ, dan prompt adalah fungsi OBJ, yang merupakan kode yang kita lihat.
Berbicara tentang ini, itu harus hampir sama. Mungkin contoh di atas terlalu abstrak dan saya tidak bisa membayangkan keadaan apa yang dapat digunakan. Jadi mari kita asumsikan persyaratan dan buat contoh yang lebih dekat dengan praktis.
Misalkan semua hyperlink di halaman kami sekarang perlu diubah menjadi merah setelah mengklik, dan mengimplementasikannya di JavaScript. Gagasan umumnya adalah untuk mendapatkan semua tag <a> di halaman, lalu mengulangi semua tag <a>, mendaftarkan acara klik untuk masing -masing, dan setelah acara dipicu, kami mengatur nilai warnanya menjadi merah.
Kode sampel adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
// Ubah warnanya
fungsi changeColor () {
this.style.color = '#f00';
}
// Inisialisasi, daftar acara untuk semua tag
fungsi init () {
var customlinks = document.geteLementsbyTagname ('a');
untuk (i in customlinks) {
// Anda juga dapat menggunakan pendengar acara untuk mendaftarkan acara
// Karena mungkin memerlukan lebih banyak kode untuk kompatibel dengan IE, FF dan browser lainnya, Anda dapat menulisnya sendiri
CustomLinks [i] .onClick = ChangeColor;
}
}
window.onload = init;
Tambahkan kode ini ke dokumen HTML dan tambahkan beberapa hyperlink ke dokumen. Saat hyperlink diklik, warnanya akan memerah. Fungsi changeColor () yang kami definisikan di sini mengacu pada hyperlink saat ini saat mengklik hyperlink. Jika Anda memanggil fungsi changeColor () secara langsung, browser akan melaporkan kesalahan, dan kesalahan diminta: 'this.style' adalah nol atau tidak objek atau tidak ditentukan.
Saya ingin tahu apakah ini dapat membuat Anda, siapa yang membaca artikel, memiliki beberapa pemahaman tentang kata kunci ini di JavaScript? Atau apakah Anda sudah tidak sabar? (:P)
Bahkan, untuk benar -benar memiliki pemahaman yang lebih dalam tentang masalah ini, Anda harus memiliki pemahaman yang lebih dalam tentang ruang lingkup dan rantai ruang lingkup JavaScript.
Lingkup, seperti namanya, mengacu pada ruang kode di mana atribut atau metode tertentu memiliki hak akses. Sederhananya, ini adalah ruang lingkup aplikasi variabel atau metode ini dalam kode. Di antara sebagian besar oops, ada tiga lingkup: publik, pribadi, dan melindungi. Saya tidak akan menjelaskan secara rinci di sini. Jika Anda memiliki pengalaman di OOP, Anda harus memiliki pemahaman yang mendalam. Yang ingin saya katakan di sini adalah bahwa ketiga jenis lingkup ini hampir tidak berarti bagi JavaScript, karena hanya ada satu ruang lingkup publik dalam JavaScript, di mana ruang lingkup dipertahankan dalam fungsi. Misalnya:
Salinan kode adalah sebagai berikut:
var test1 = 'variabel glable';
function example () {
var test2 = 'contoh variabel';
peringatan (test1);
waspada (test2);
}
contoh();
peringatan (test1);
waspada (test2);
Menurut apa yang kami jelaskan sebelumnya, variabel test1 di sini setara dengan properti jendela, sehingga akan bekerja dalam seluruh ruang lingkup jendela, sementara test2 dinyatakan secara internal dalam fungsi contoh (), sehingga ruang lingkupnya dipertahankan di dalam metode contoh (). Jika browser Test2 dipanggil di luar fungsi, kesalahan akan diminta. Dan memanggil test1 di dalam contoh () baik -baik saja.
Berdasarkan ini, mari kita berikan contoh lain:
Salinan kode adalah sebagai berikut:
var test = 'variabel glable';
function example () {
var test = 'variabel contoh';
}
contoh();
waspada (tes);
Apa yang akan terjadi jika contoh ini berjalan? Ya, kotak peringatan akan meminta "variabel yang dapat dikembalikan", karena ruang lingkup variabel uji di dalam fungsi contoh () hanya dipertahankan secara internal dan tidak akan mempengaruhi variabel uji eksternal. Bagaimana jika kita menghapus kata kunci VAR dari variabel uji di dalam contoh ()? Anda dapat mencobanya sendiri.
Berbicara tentang ini, ada konsep lain yang terlibat, yaitu konsep rantai lingkup. Rantai lingkup adalah jalur yang dapat menentukan nilai variabel. Seperti yang dapat dilihat dari contoh di atas, kata kunci VAR digunakan untuk mempertahankan rantai lingkup. Jika variabel menggunakan deklarasi kata kunci VAR, itu dapat dianggap sebagai titik akhir dari rantai lingkup. Definisi parameter formal dari fungsi yang sama juga akan memainkan peran yang sama.
Berbicara tentang ini, Anda memiliki pemahaman yang lebih jelas tentang pria aneh ini, bukan? Menurut interpretasinya yang sederhana, ini selalu menunjuk pada objek yang menyebut fungsi itu berada. Menurut ruang lingkup dan rantai ruang lingkup, kami akan dengan jelas menentukan wajah sebenarnya dari ini. Pada akhirnya, mari kita ambil perubahan sederhana dari awal contoh:
Salinan kode adalah sebagai berikut:
function test () {
waspada (ini);
}
var obj = function () {
var name = 'testObj';
}
obj.objtest = tes;
obj.objtest2 = function () {
tes();
}
tes();
obj.objtest ();
obj.objtest2 ();
Apa yang menurut Anda akan diminta? Anda dapat mencoba menjalankan (: p);
Karena ini diubah sesuai dengan perubahan objek yang memanggil fungsi itu, dapatkah kita memaksa perubahan objek panggilannya? Jawabannya adalah ya. Dalam artikel mendatang, kami akan memperkenalkan bagian konten ini, serta metode implementasi dari berbagai jenis anggota data dalam JavaScript, penutupan dan konsep lainnya.
Saya telah menulis beberapa pengalaman dan pengalaman saya selama proses pembelajaran. Pertama, saya dapat membaginya dengan Anda dan juga memeriksa kekurangan saya sendiri. Jika saya memiliki pertanyaan tentang menulis, silakan kritik dan beri saya nasihat. Terima kasih banyak!