Pemahaman mendalam tentang skop ini dalam kemahiran Javascript_javascript

Semua orang sering keliru dengan lelaki ini apabila menggunakan Javascript. Bagi kebanyakan pembangun dengan pengalaman pembangunan OOP, ini ialah pengecam yang merujuk kepada elemen biasa dalam skop semasa, tetapi dalam Javascript ia kelihatan pelik kerana ia tidak tetap, tetapi berubah dengannya kerana perubahan dalam persekitaran pelaksanaan. Dalam Javascript ini sentiasa menunjuk kepada objek yang kaedahnya dipanggil.

Berikan contoh mudah:

Salin kod Kod adalah seperti berikut:

ujian fungsi(){
makluman(ini);
}
var obj=function(){
var name='testObj';
}
obj.objTest=test;
ujian();
obj.objTest();

Masukkan kod ini ke dalam HTML dan jalankan halaman ini Anda akan melihat amaran [tetingkap objek] dahulu, dan kemudian amaran kedua.

Salin kod Kod adalah seperti berikut:

var obj=function(){
var name='testObj';
}

Kami mula-mula menentukan kaedah ujian() dan memanggil kaedah amaran() di dalam kaedah untuk memaparkan ini Kemudian kami menentukan objek fungsi obj, menambah nama medan peribadi padanya dan menambah kaedah statik objTest() dicipta, dan fungsi ini menunjuk terus ke fungsi test().

Panggil kaedah test() dan obj.objTest() masing-masing Kotak amaran pertama menggesa objek Window, dan gesaan kedua ialah kod fungsi obj yang kami takrifkan. Ini menunjukkan bahawa nilai ini berbeza apabila fungsi ujian dilaksanakan dua kali!

Ini menunjukkan bahawa apabila objek memanggil fungsi adalah berbeza, objek yang dirujuk oleh dalaman kata kunci ini adalah berbeza. Perlu diingatkan di sini bahawa Javascript ialah bahasa berasaskan objek Apabila pembolehubah atau fungsi kami ditakrifkan di bawah akar teg <script></script> objek. Jadi apabila kita menggunakan kod function test(){} untuk mentakrifkan fungsi, ia sebenarnya bersamaan dengan menambah fungsi baharu pada objek window, iaitu fungsi window.test().

Kita boleh melakukan percubaan:

Salin kod Kod adalah seperti berikut:

ujian fungsi(){
makluman(ini);
}
makluman(ujian===window.test);

Gesaan kotak amaran akan menjadi benar, yang bermaksud bahawa apabila kita memanggil fungsi test(), kita bersamaan dengan memanggil window.test(). Jadi apabila kita memanggil fungsi test(), objek yang memanggil fungsi ini sebenarnya adalah objek tetingkap, dan ini merujuk kepada objek tetingkap, jadi kandungan tetingkap amaran yang muncul apabila kita memberi amaran(ini) ialah [objek Window ]. Kami menetapkan obj.objTest=test yang bersamaan dengan menunjuk obj.objTest() ke test(), jadi apabila kita memanggil fungsi obj.objTest(), ia bersamaan dengan memanggil fungsi test() dalam obj, jadi sekarang ini merujuk kepada objek obj, apa yang digesa adalah fungsi obj, iaitu kod yang kita lihat.

Ini harus dijelaskan hampir cukup Mungkin contoh di atas terlalu abstrak dan saya tidak dapat membayangkan keadaan di mana ia boleh digunakan.

Andaikan bahawa warna semua hiperpautan dalam halaman semasa kami harus ditukar kepada merah selepas diklik, dan ini dilaksanakan menggunakan Javascript. Idea umum adalah untuk mendapatkan semua teg dalam halaman, kemudian merentasi semua teg .

Kod sampel adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

//Tukar warna
fungsi changeColor(){
this.style.color='#f00';
}
//Mulakan, daftarkan acara untuk semua tag
fungsi init(){
var customLinks=document.getElementsByTagName('a');
untuk(i dalam Pautan tersuai){
//Anda juga boleh menggunakan pendengar acara untuk mendaftar acara
//Disebabkan keserasian dengan IE, FF dan penyemak imbas lain, lebih banyak kod mungkin diperlukan, anda boleh menulisnya sendiri
Pautan tersuai[i].onclick=changeColor;
}
}
window.onload=init;

Tambahkan kod ini pada dokumen HTML dan tambah beberapa hiperpautan pada dokumen Apabila hiperpautan diklik, warna akan bertukar menjadi merah. fungsi, ia merujuk kepada hiperpautan semasa. Dan jika anda memanggil fungsi changeColor() secara terus, penyemak imbas akan melaporkan ralat, menyebabkan ralat seperti Ralat: 'this.style' adalah batal atau bukan objek atau tidak ditentukan.

Saya tertanya-tanya adakah ini boleh memberi anda yang membaca artikel itu sedikit pemahaman tentang kata kunci ini dalam Javascript? Atau adakah anda tidak sabar? (:P)

Malah, jika anda ingin benar-benar memahami isu ini dengan lebih mendalam, anda mesti mempunyai pemahaman yang mendalam tentang skop dan rantaian skop Javascript.

Skop, seperti namanya, merujuk kepada ruang kod yang atribut atau kaedah tertentu mempunyai keizinan akses Ringkasnya, ia adalah skop penggunaan pembolehubah atau kaedah ini dalam kod. Dalam kebanyakan OOP, terdapat tiga skop utama: awam, peribadi dan perlindungan Saya tidak akan menerangkan tiga skop secara terperinci di sini Jika anda mempunyai pengalaman OOP, anda harus mempunyai pemahaman yang mendalam tentangnya. Apa yang saya ingin katakan di sini ialah ketiga-tiga jenis skop ini hampir tidak bermakna kepada Javascript, kerana hanya terdapat satu skop awam dalam Javascript, dan skop dalam Javascript dikekalkan dalam fungsi. Contohnya:

Salin kod Kod adalah seperti berikut:

var test1='pembolehubah globle';
contoh fungsi(){
var test2='contoh pembolehubah';
makluman(ujian1);
makluman(ujian2);
}
contoh();
makluman(ujian1);
makluman(ujian2);

Menurut apa yang kami jelaskan sebelum ini, pembolehubah test1 di sini adalah bersamaan dengan atribut tetingkap, jadi ia akan berfungsi dalam keseluruhan skop tetingkap, manakala test2 diisytiharkan di dalam contoh() fungsi, jadi skopnya dikekalkan di dalam example(), jika pelayar test2 dipanggil di luar fungsi, ralat akan digesa. Tiada masalah memanggil test1 dalam contoh().

Berdasarkan perkara ini, mari berikan satu lagi contoh:

Salin kod Kod adalah seperti berikut:

var test='globle variable';
contoh fungsi(){
var test='example variable';
}
contoh();
makluman(ujian);

Apakah hasil daripada menjalankan contoh ini? Ya, kotak amaran akan menggesa "pembolehubah globle" kerana skop pembolehubah ujian di dalam fungsi example() hanya kekal dalaman dan tidak akan menjejaskan pembolehubah ujian luaran. Bagaimana jika kita mengalih keluar kata kunci var daripada pembolehubah ujian di dalam example()? Anda boleh mencubanya sendiri.

Bercakap tentang ini, konsep lain terlibat, iaitu konsep rantai skop. Rantaian skop ialah laluan yang melaluinya nilai pembolehubah boleh ditentukan. Seperti yang dapat dilihat daripada contoh di atas, kata kunci var digunakan untuk mengekalkan rantai skop Jika pembolehubah diisytiharkan menggunakan kata kunci var, ia boleh dianggap sebagai titik akhir rantai skop. Takrifan parameter formal bagi fungsi yang sama juga akan memainkan peranan yang sama.

Bercakap mengenainya, adakah anda mempunyai pemahaman yang lebih jelas tentang lelaki pelik ini? Mengikut tafsiran mudahnya, ini sentiasa menunjuk kepada objek yang memanggil fungsi di mana ia terletak Menurut skop dan rantaian skop, kami akan menentukan dengan jelas wajah sebenar ini. Pada penghujungnya, berikut ialah variasi ringkas contoh pada permulaan:

Salin kod Kod adalah seperti berikut:

ujian fungsi(){
makluman(ini);
}
var obj=function(){
var name='testObj';
}
obj.objTest=test;
obj.objTest2=function(){
ujian();
}
ujian();
obj.objTest();
obj.objTest2();

Apa yang anda fikir ia akan menggesa? Anda boleh cuba menjalankannya (:P);

Memandangkan ini berubah berdasarkan perubahan objek yang memanggil fungsinya, bolehkah kita menukar objek panggilannya secara paksa? Jawapannya ialah ya. Artikel akan datang akan memperkenalkan bahagian ini, serta pelaksanaan pelbagai jenis ahli data dalam Javascript, penutupan dan konsep lain.

Menulis beberapa pengalaman dan pandangan saya dalam proses pembelajaran bukan sahaja untuk berkongsi dengan semua orang, tetapi juga untuk meneliti kekurangan saya sendiri jika terdapat sebarang masalah dalam penulisan saya, mohon kritik dan nasihat banyak!