Cara Menyembunyikan Properti Angular Anda – # vs private Dijelaskan

969 BLOG Cara Menyembunyikan Properti Angular Anda – # vs private Dijelaskan

Pernahkah Anda memperhatikan simbol hash muncul di sampel kode Angular? Jika tidak, Anda mungkin akan segera melihatnya. Apa tujuan dari # dan kapan Anda harus menggunakannya?

Itu # simbol baru-baru ini ditambahkan ke JavaScript untuk menunjukkan properti kelas privat. Membuat variabel kelas privat berarti bahwa variabel tersebut hanya dapat diakses di dalam kelasnya. Itu memungkinkan kami untuk merangkum data yang hanya ingin kami akses dalam suatu layanan.

Tapi bukankah kita sudah memiliki pengakses pribadi untuk bidang kelas kita? Ya!

Lalu mengapa kita membutuhkan sintaks hash yang baru?

Mari kita lihat pengakses pribadi terlebih dahulu, lalu periksa # sintaks dan mengapa itu adalah pilihan yang lebih baik dalam aplikasi Angular kami.

Anda dapat menonton video terkait di sini untuk demonstrasi:

https://www.youtube.com/watch?v=487iCAnhxCM

Bahaya Properti Kelas Publik

Mari kita mulai dengan membuat properti di layanan dan mencoba mengaksesnya dari komponen kita. Untuk contoh ini, kami memiliki layanan Produk dan komponen Produk.

Di layanan Produk, kami membuat properti untuk URL yang akan kami gunakan untuk mendapatkan data produk kami. Dan a products properti untuk menyimpan berbagai produk kami yang diambil.

// Product Service@Injectable({  providedIn: 'root'})export class ProductService {  productUrl="api/products";  products = [];}

Untuk memverifikasi nilai URL, mari buat metode untuk mencatatnya:

// Product ServicelogUrl() {  console.log('Url:', this.productUrl);}

Kemudian kami akan memanggil metode itu di konstruktor layanan Produk:

// Product Serviceconstructor() {  this.logUrl();}

Secara default, variabel yang kita definisikan di kelas bersifat publik, artinya kode lain di aplikasi kita dapat mengaksesnya. Jadi kita harus dapat mengakses properti layanan Produk kita dari komponen kita.

Mari kita coba. Di komponen Produk, pertama-tama kita menyuntikkan layanan. Dalam contoh ini, kami menggunakan yang baru inject berfungsi untuk injeksi ketergantungan alih-alih konstruktor. Dan tambahkan inject ke pernyataan impor dari @angular/core.

Kemudian kami menambahkan konstruktor. Dan karena secara default setiap properti atau metode kelas bersifat publik, kita dapat mengubah URL yang kita definisikan di layanan. Untuk konfirmasi, kami akan memanggil metode layanan untuk mencatat URL.

// Product ComponentproductService = inject(ProductService);constructor() {  this.productService.productUrl = `api/nefarious`;  this.productService.logUrl();}

Jika kita menjalankan aplikasi dan membuka alat pengembang, pertama-tama kita melihat log layanan URL, kemudian kita melihat URL komponen yang diubah (Gambar 1).

Gambar 1. Keluaran konsol yang dihasilkan.

Yah… itu tidak baik. Komponen kami dapat mengubah URL yang ditentukan di layanan kami.

Fitur Aksesibilitas Pribadi TypeScript

Untuk lebih melindungi properti layanan kami agar tidak dimodifikasi di luar layanan, kami menggunakan aksesibilitas pribadi.

Aksesibilitas pribadi adalah fitur dari TypeScript. Itu menandai properti atau metode kelas sehingga hanya dapat diakses dari dalam kelas. Properti atau metode tidak tersedia dari komponen atau layanan lainnya.

Untuk menggunakan aksesibilitas pribadi, kami menambahkan private kata kunci di depan nama variabel.

// Product Serviceprivate productUrl="api/products";

Karena kami sedang memodifikasi properti ini di komponen, kode komponen sekarang menghasilkan kesalahan: Property 'productUrl' is private and only accessible within class 'ProductService'. Besar! Komponen kami tidak dapat lagi mengakses properti pribadi dari layanan kami.

Dengan menambahkan kata kunci aksesibilitas pribadi TypeScript di depan properti dalam layanan, variabel hanya dapat diakses dari layanan itu.

Namun, kembali ke komponen, bagaimana jika kita mencoba melakukan hal seperti ini:

// Product Componentconstructor() {  for (let i in this.productService) {    console.log('properties:', i);  }  this.productService.logUrl();}

Itu for...in loop mengulangi properti objek. Dalam contoh ini, kami menampilkan setiap properti ke konsol. Hasilnya ditunjukkan pada Gambar 2:

Gambar 2. Keluaran konsol yang dihasilkan

Perhatikan bahwa ini menampilkan properti publik dan pribadi kita. Sekarang kita dapat melihat nama dari properti pribadi, kita dapat menggunakannya untuk memperbarui properti pribadi tersebut.

// Product Componentconstructor() {  for (let i in this.productService) {    console.log('properties:', i);  }  this.productService['productUrl']= 'api/nefarious';  this.productService.logUrl();}

Ups! Kami telah mengubah lagi properti layanan kami dari komponen kami. Properti pribadi kami tidak terlalu pribadi.

Mengapa demikian? Itu karena private kata kunci adalah bagian dari TypeScript, bukan JavaScript. Artinya, aksesibilitas privat hanya diberlakukan selama pengembangan, sebagai bagian dari pengecekan tipe, dan selama kompilasi. Kami mendapat pemberitahuan selama pengembangan dan kompilasi bahwa kami tidak dapat mengakses properti pribadi dari luar kelasnya.

Tapi saat kode TypeScript kita ditranspilasi ke JavaScript dan dieksekusi, kata kunci privat hilang. Itu berarti konstruksi runtime JavaScript seperti kita for...in loop atau pencarian properti sederhana, masih dapat mengakses properti atau metode yang ditentukan dengan private kata kunci. Dengan kata lain, komponen dapat mengakses properti privat di layanan kami saat runtime. Astaga!

Anggota Kelas Privat JavaScript (#)

Menggunakan JavaScript # sintaks memecahkan masalah itu. Baru-baru ini, JavaScript menambahkan properti dan metode kelas privat, dilambangkan dengan a #. Sejak # adalah bagian dari JavaScript, ini menunjukkan properti dan metode kami sebagai pribadi selama pengembangan, kompilasi, dan saat runtime.

Di layanan Produk, mari kita hapus private kata kunci dan tambahkan #. Itu # adalah awalan pada variabel itu sendiri, dan menjadi bagian dari nama variabel. Jadi kita perlu mengubah nama variabel dimanapun kita mengaksesnya, seperti di file kita logUrl metode.

// Product Service@Injectable({  providedIn: 'root'})export class ProductService {  #productUrl="api/products";  products = [];  constructor() {     this.logUrl();  }  logUrl() {    console.log('Url:',this.#productUrl);  }}

Kami sekarang melihat kesalahan saat kami mengakses properti di komponen Produk: Property 'productUrl' does not exist on type 'ProductService'. Did you mean '#productUrl'?

Kami dapat mencoba mengubah kode pencarian properti kami di komponen untuk memasukkan a # demikian juga.

// Product Componentconstructor() {  for (let i in this.productService) {    console.log('properties:', i);  }  this.productService['#productUrl']= 'api/nefarious';  this.productService.logUrl();}

Tetapi properti itu masih belum ditemukan: Property '#productUrl' does not exist on type 'ProductService'. Properti pribadi di layanan kami sekarang disembunyikan dengan benar dari komponen kami. Kami harus menghapus baris pencarian properti yang mengakses #productUrl agar kode kita berhasil dikompilasi.

Melihat konsol (Gambar 3), perhatikan bahwa for...in loop sekarang menemukan publik products properti, tetapi bukan milik pribadi productsUrl Properti. Properti pribadi kami bersifat pribadi dan tersembunyi, dikemas dengan benar dalam layanan kami.

Gambar 3. Keluaran konsol yang dihasilkan

Membungkus

Sebagai pengembang Angular, kami telah menggunakan TypeScript private aksesibilitas kata kunci untuk menjadikan properti atau metode pribadi. Tapi itu hanya melindungi properti pada tipe pengembangan dan kompilasi, bukan runtime.

Sekarang kita dapat menggunakan sintaks properti kelas privat JavaScript (dilambangkan dengan # simbol) untuk membuat properti dan metode pribadi benar-benar pribadi dan tersembunyi dari bagian lain dari kode kita.

Untuk melihat konsep ini beraksi, lihat demo yang disediakan dalam video ini:

https://www.youtube.com/watch?v=487iCAnhxCM