Halo lagi! Kami telah menulis bahwa pada akhir September di OTUS, aliran baru kursus
"Pengembang JavaScript Fullstack" akan dimulai. Untuk mengantisipasi dimulainya kelas, kami terus berbagi dengan Anda artikel hak cipta yang disiapkan khusus untuk siswa kursus. Hari ini kita akan melihat jenis konteks dalam JavaScript. Ayo pergi.
Penulis artikel: Pavel Yakupov
Tujuan artikel ini adalah agar pembaca memahami konsep dasar lingkup yang digunakan dalam JavaScript.
Lingkup adalah salah satu hal terpenting dalam JavaScript (dan memiliki tempat di sebagian besar bahasa pemrograman modern). Lingkup dikaitkan dengan umur panjang suatu variabel atau fungsi, akses, visibilitas variabel, dan beberapa hal lainnya.
Mengapa kita membutuhkan ruang lingkup ini?
Lingkup dalam bahasa pemrograman melakukan fungsi-fungsi berikut:
Keamanan (enkapsulasi) - variabel dan fungsi hanya tersedia bila diperlukan.
Menghilangkan konflik nama variabel. Kehadiran cakupan memungkinkan Anda untuk tidak "membuang" semua variabel menjadi satu tumpukan, mensimulasikan ruang nama (namespace).
Penggunaan kembali kode - kode tertulis kemudian dapat digunakan, menghindari efek "asing".
Jenis Lingkup
Pada level paling sederhana, dalam JavaScript ada dua cakupan - lokal dan global.
Pada artikel ini, kami juga akan menyentuh pada ruang lingkup seperti leksikal dan blok.
Ruang lingkup global
Saat Anda membuka dokumen dalam JavaScript dan mulai menulis kode, Anda masuk dalam lingkup global.
Segala sesuatu yang dibuat dalam lingkup global - variabel, fungsi - dapat diakses dari mana saja dalam program ini. Juga, variabel global tersedia setiap saat aplikasi Anda berjalan dan hanya dihapus ketika program selesai kerjanya.
Banyak pendatang baru pada awalnya menggunakan variabel global terlalu sering - ini agak lebih mudah untuk diprogram, tetapi ini dianggap praktik yang buruk, dan sering menyebabkan program tidak stabil yang pada akhirnya menggunakan jauh lebih banyak memori daripada yang sebenarnya mereka butuhkan. Lagi pula, jika variabel dienkapsulasi dengan andal di dalam fungsi di mana mereka digunakan, pada akhir fungsi, mereka akan dihapus dari memori menggunakan pengumpul sampah dan berhenti menempati memori klien, yang tidak terbatas.
Ruang lingkup lokal
Variabel yang dideklarasikan secara lokal hanya tersedia dalam lingkup di mana mereka dideklarasikan.
Cara termudah untuk membuat ruang lingkup baru adalah dengan membuat fungsi baru. Variabel yang dibuat di dalam suatu fungsi hanya dapat diakses dari dalam. Selain itu, ruang lingkup lokal dapat diperoleh dengan menggunakan ruang lingkup blok (akan dibahas di bawah).
function foo(){ let x = 15; } //console.log(x); error { let y = 14; } // console.log(y); error { var z = 13; } console.log(z); // var , // // - 13
Lingkup leksikal
Jadi apa ruang lingkup leksikal? Secara sederhana, ini adalah kemampuan fungsi internal untuk mengakses ruang lingkup eksternal. Di sini ada baiknya beralih ke praktik penutupan. Anda mungkin dapat menulis beberapa artikel lagi tentang mereka, tetapi saya akan segera memberi Anda satu contoh klasik:
sum(5)(5) // ? function sum(a){ var add = function(b){ return a+b; } return add; } console.log(sum(5)(5)); // 10 //
Lingkup blok
Sejauh ini, kami hanya membahas ruang lingkup yang terkait dengan operasi fungsi dan kurung kurawal {}, dan kami telah membahas perbedaan dalam pengoperasian var dan hanya membiarkan secara tidak langsung.
Bagaimana cara kerja var directive? Ketika sebuah variabel dideklarasikan menggunakannya dalam lingkup global, nama variabel tersebut ditetapkan sebagai properti ke objek jendela global (jika kita maksudkan browser) dan tetap ada di sana sepanjang waktu program berjalan. Pada saat yang sama, sebagai ruang lingkup blok, seperti {} (dan jika, untuk, sementara, dan yang lainnya dimasukkan dengan cukup logis).
Selain itu, ada fitur lain dari let dan const - mendeklarasikan dalam satu lingkup, maka mereka tidak dapat dideklarasikan lagi dalam cakupan yang sama (yah, ketidakpuasan penerjemah terlihat cukup logis di sini).
let x = 15; console.log(x); // { let x = 16; // console.log(x) // let x = 17; // , }
Fungsi baru
Fitur cakupan ketika mendeklarasikan fungsi baru sebagai "Fungsi baru". Opsi ini untuk membuat fungsi jarang digunakan, tetapi kadang-kadang mungkin diperlukan.
Contoh Sintaks:
//let newFunc = new Function([arg1, arg2…argN], functionBody); let mult = new Function('a', 'b', 'return a * b'); console.log(mult(3,4));
Biasanya, suatu fungsi mengingat di mana ia dilahirkan (Lingkungan Lexikal), tetapi ketika suatu fungsi dibuat menggunakan fungsi Function baru, ia tidak menulis variabel lingkungan di sekitarnya, seperti dalam situasi normal, tetapi hanya yang dinyatakan secara global.
// , ()() let a = 3; function outerFunc() { var a = 2; var func = new Function('console.log(a*a)'); return func; } outerFunc()(); // 9, window
Mengangkat (meningkatkan variabel)
Membahas ruang lingkup, kita tidak bisa menyentuh pada topik meningkatkan ruang lingkup variabel. Penerjemah yang membaca kode sebenarnya membacanya dua kali: ia membaca fungsi yang dideklarasikan sebagai fungsi mendeklarasikan fungsi, dan membaca variabel global yang dinyatakan global menggunakan variabel var. Namun, variabel dicatat bukan oleh nilai yang dideklarasikan, tetapi oleh nilai yang tidak ditentukan.
console.log(x); // undefined var x = 15; console.log(y);// error let y = 13;
Biarkan topik ini hanya berhubungan secara tidak langsung dengan bidang visibilitas, tetapi terkadang pengetahuan ini bisa berguna.
Terima kasih semuanya! Saya harap artikel ini bermanfaat bagi seseorang!
Tautan yang bermanfaat:developer.mozilla.org/en-US/docs/Glossary/Scopedeveloper.mozilla.org/en/docs/Web/JavaScript/Closures2ality.com/2015/02/es6-scoping.htmlpelajari.javascript.ru/new-fungsihabr.com/en/company/otus/blog/466873