O'zbek

JavaScript Symbollarini o'rganing: ularning maqsadi, yaratilishi, noyob xususiyat kalitlari, metama'lumotlarni saqlash va nomlar to'qnashuvining oldini olish uchun qo'llanilishi. Amaliy misollar keltirilgan.

JavaScript Symbollari: Noyob Xususiyat Kalitlari va Metama'lumotlar

ECMAScript 2015 (ES6) da taqdim etilgan JavaScript Symbollari noyob va o'zgarmas xususiyat kalitlarini yaratish mexanizmini ta'minlaydi. Satrlar yoki raqamlardan farqli o'laroq, Symbollarning butun JavaScript ilovangiz bo'ylab noyob bo'lishi kafolatlanadi. Ular nomlar to'qnashuvining oldini olish, mavjud xususiyatlarga xalaqit bermasdan obyektlarga metama'lumotlar biriktirish va obyekt xatti-harakatlarini moslashtirish imkonini beradi. Ushbu maqolada JavaScript Symbollari haqida to'liq ma'lumot berilib, ularni yaratish, qo'llash va eng yaxshi amaliyotlar ko'rib chiqiladi.

JavaScript Symbollari nima?

Symbol — bu JavaScript'dagi raqamlar, satrlar, mantiqiy qiymatlar, null va undefined kabi primitiv ma'lumotlar turi. Biroq, boshqa primitiv turlardan farqli o'laroq, Symbollar noyobdir. Har safar Symbol yaratganingizda, siz butunlay yangi, noyob qiymatga ega bo'lasiz. Bu noyoblik Symbollarni quyidagilar uchun ideal qiladi:

Symbollarni Yaratish

Symbolni Symbol() konstruktori yordamida yaratasiz. Shuni yodda tutish muhimki, siz new Symbol() dan foydalana olmaysiz; Symbollar obyekt emas, balki primitiv qiymatlardir.

Oddiy Symbol Yaratish

Symbol yaratishning eng oddiy usuli:

const mySymbol = Symbol();
console.log(typeof mySymbol); // Natija: symbol

Symbol() ga har bir murojaat yangi, noyob qiymat hosil qiladi:

const symbol1 = Symbol();
const symbol2 = Symbol();
console.log(symbol1 === symbol2); // Natija: false

Symbol Tavsiflari

Symbol yaratishda ixtiyoriy satrli tavsif berishingiz mumkin. Bu tavsif nosozliklarni tuzatish (debugging) va qaydlarni yuritish (logging) uchun foydalidir, lekin u Symbolning noyobligiga ta'sir qilmaydi.

const mySymbol = Symbol("myDescription");
console.log(mySymbol.toString()); // Natija: Symbol(myDescription)

Tavsif faqat ma'lumot berish maqsadida ishlatiladi; bir xil tavsifga ega bo'lgan ikkita Symbol baribir noyob bo'lib qoladi:

const symbolA = Symbol("same description");
const symbolB = Symbol("same description");
console.log(symbolA === symbolB); // Natija: false

Symbollardan Xususiyat Kalitlari Sifatida Foydalanish

Symbollar xususiyat kalitlari sifatida juda foydalidir, chunki ular noyoblikni kafolatlaydi va obyektlarga xususiyatlar qo'shishda nomlar to'qnashuvining oldini oladi.

Symbol Xususiyatlarini Qo'shish

Symbollarni xususiyat kalitlari sifatida satrlar yoki raqamlar kabi ishlatishingiz mumkin:

const mySymbol = Symbol("myKey");
const myObject = {};

myObject[mySymbol] = "Salom, Symbol!";

console.log(myObject[mySymbol]); // Natija: Salom, Symbol!

Nomlar To'qnashuvining Oldini Olish

Tasavvur qiling, siz obyektlarga xususiyatlar qo'shadigan uchinchi tomon kutubxonasi bilan ishlayapsiz. Siz mavjud xususiyatlarni bexosdan o'zgartirib yuborish xavfisiz o'z xususiyatlaringizni qo'shishni xohlashingiz mumkin. Symbollar buni amalga oshirishning xavfsiz usulini ta'minlaydi:

// Uchinchi tomon kutubxonasi (simulyatsiya qilingan)
const libraryObject = {
  name: "Kutubxona Obyekti",
  version: "1.0"
};

// Sizning kodingiz
const mySecretKey = Symbol("mySecret");
libraryObject[mySecretKey] = "Juda Maxfiy Ma'lumot";

console.log(libraryObject.name); // Natija: Kutubxona Obyekti
console.log(libraryObject[mySecretKey]); // Natija: Juda Maxfiy Ma'lumot

Bu misolda mySecretKey sizning xususiyatingiz libraryObject dagi mavjud xususiyatlar bilan ziddiyatga kirmasligini ta'minlaydi.

Symbol Xususiyatlarini Sanab O'tish

Symbol xususiyatlarining muhim xususiyatlaridan biri shundaki, ular for...in sikllari va Object.keys() kabi standart sanab o'tish usullaridan yashirin bo'ladi. Bu obyektlarning yaxlitligini himoya qilishga yordam beradi va Symbol xususiyatlariga tasodifiy kirish yoki o'zgartirishni oldini oladi.

const mySymbol = Symbol("myKey");
const myObject = {
  name: "Mening Obyektim",
  [mySymbol]: "Symbol Qiymati"
};

console.log(Object.keys(myObject)); // Natija: ["name"]

for (let key in myObject) {
  console.log(key); // Natija: name
}

Symbol xususiyatlariga kirish uchun Object.getOwnPropertySymbols() dan foydalanish kerak, u obyektning barcha Symbol xususiyatlari massivini qaytaradi:

const mySymbol = Symbol("myKey");
const myObject = {
  name: "Mening Obyektim",
  [mySymbol]: "Symbol Qiymati"
};

const symbolKeys = Object.getOwnPropertySymbols(myObject);
console.log(symbolKeys); // Natija: [Symbol(myKey)]
console.log(myObject[symbolKeys[0]]); // Natija: Symbol Qiymati

Taniqli Symbollar

JavaScript ma'lum xatti-harakatlar yoki funksionalliklarni ifodalovchi, taniqli Symbollar deb nomlanuvchi o'rnatilgan Symbollar to'plamini taqdim etadi. Bu Symbollar Symbol konstruktorining xususiyatlaridir (masalan, Symbol.iterator, Symbol.toStringTag). Ular obyektlarning turli kontekstlarda o'zini qanday tutishini moslashtirish imkonini beradi.

Symbol.iterator

Symbol.iterator — bu obyekt uchun standart iteratorni belgilaydigan Symbol. Obyektda Symbol.iterator kalitiga ega metod mavjud bo'lsa, u iteratsiya qilinadigan bo'lib qoladi, ya'ni uni for...of sikllari va spread operatori (...) bilan ishlata olasiz.

Misol: Maxsus iteratsiya qilinadigan obyekt yaratish

const myCollection = {
  items: [1, 2, 3, 4, 5],
  [Symbol.iterator]: function* () {
    for (let item of this.items) {
      yield item;
    }
  }
};

for (let item of myCollection) {
  console.log(item); // Natija: 1, 2, 3, 4, 5
}

console.log([...myCollection]); // Natija: [1, 2, 3, 4, 5]

Bu misolda, myCollectionSymbol.iterator yordamida iterator protokollarini amalga oshiradigan obyekt. Generator funksiyasi items massividagi har bir elementni qaytaradi, bu esa myCollection ni iteratsiya qilinadigan qiladi.

Symbol.toStringTag

Symbol.toStringTag — bu Object.prototype.toString() chaqirilganda obyektning satrli ko'rinishini moslashtirish imkonini beruvchi Symbol.

Misol: toString() ko'rinishini moslashtirish

class MyClass {
  get [Symbol.toStringTag]() {
    return 'MyClassInstance';
  }
}

const instance = new MyClass();
console.log(Object.prototype.toString.call(instance)); // Natija: [object MyClassInstance]

Symbol.toStringTag bo'lmaganda, natija [object Object] bo'lar edi. Bu Symbol obyektlaringizga yanada tavsiflovchi satr ko'rinishini berish imkonini beradi.

Symbol.hasInstance

Symbol.hasInstance — bu instanceof operatorining xatti-harakatini moslashtirishga imkon beruvchi Symbol. Odatda, instanceof obyektning prototiplar zanjirida konstruktorning prototype xususiyati mavjudligini tekshiradi. Symbol.hasInstance bu xatti-harakatni bekor qilishga imkon beradi.

Misol: instanceof tekshiruvini moslashtirish

class MyClass {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof MyClass); // Natija: true
console.log({} instanceof MyClass); // Natija: false

Bu misolda, Symbol.hasInstance metodi instansiya massiv ekanligini tekshiradi. Bu MyClass ni haqiqiy prototiplar zanjiridan qat'i nazar, massivlarni tekshirish vositasi sifatida ishlashiga olib keladi.

Boshqa Taniqli Symbollar

JavaScript bir nechta boshqa taniqli Symbollarni belgilaydi, jumladan:

Global Symbollar Registri

Ba'zan siz Symbollarni ilovangizning turli qismlari yoki hatto turli ilovalar o'rtasida bo'lishishingiz kerak bo'ladi. Global Symbollar registri kalit orqali Symbollarni ro'yxatdan o'tkazish va olish mexanizmini ta'minlaydi.

Symbol.for(key)

Symbol.for(key) metodi global registrda berilgan kalit bilan Symbol mavjudligini tekshiradi. Agar mavjud bo'lsa, u o'sha Symbolni qaytaradi. Agar mavjud bo'lmasa, u kalit bilan yangi Symbol yaratadi va uni registrda ro'yxatdan o'tkazadi.

const globalSymbol1 = Symbol.for("myGlobalSymbol");
const globalSymbol2 = Symbol.for("myGlobalSymbol");

console.log(globalSymbol1 === globalSymbol2); // Natija: true
console.log(Symbol.keyFor(globalSymbol1)); // Natija: myGlobalSymbol

Symbol.keyFor(symbol)

Symbol.keyFor(symbol) metodi global registrda Symbol bilan bog'langan kalitni qaytaradi. Agar Symbol registrda bo'lmasa, u undefined qaytaradi.

const mySymbol = Symbol("localSymbol");
console.log(Symbol.keyFor(mySymbol)); // Natija: undefined

const globalSymbol = Symbol.for("myGlobalSymbol");
console.log(Symbol.keyFor(globalSymbol)); // Natija: myGlobalSymbol

Muhim: Symbol() yordamida yaratilgan Symbollar global registrda avtomatik ravishda ro'yxatdan o'tkazilmaydi. Faqat Symbol.for() yordamida yaratilgan (yoki olingan) Symbollar registrning bir qismidir.

Amaliy Misollar va Qo'llash Holatlari

Quyida Symbollarning real hayotiy stsenariylarda qanday ishlatilishi mumkinligini ko'rsatadigan amaliy misollar keltirilgan:

1. Plagin Tizimlarini Yaratish

Symbollar turli modullar bir-birining xususiyatlariga xalaqit bermasdan asosiy obyektning funksionalligini kengaytira oladigan plagin tizimlarini yaratish uchun ishlatilishi mumkin.

// Asosiy obyekt
const coreObject = {
  name: "Asosiy Obyekt",
  version: "1.0"
};

// 1-plagin
const plugin1Key = Symbol("plugin1");
coreObject[plugin1Key] = {
  description: "1-plagin qo'shimcha funksionallik qo'shadi",
  activate: function() {
    console.log("1-plagin faollashtirildi");
  }
};

// 2-plagin
const plugin2Key = Symbol("plugin2");
coreObject[plugin2Key] = {
  author: "Boshqa Dasturchi",
  init: function() {
    console.log("2-plagin ishga tushirildi");
  }
};

// Plaginlarga kirish
console.log(coreObject[plugin1Key].description); // Natija: 1-plagin qo'shimcha funksionallik qo'shadi
coreObject[plugin2Key].init(); // Natija: 2-plagin ishga tushirildi

Bu misolda har bir plagin o'zining noyob Symbol kalitidan foydalanadi, bu esa potentsial nomlar to'qnashuvining oldini oladi va plaginlarning birgalikda muammosiz ishlashini ta'minlaydi.

2. DOM Elementlariga Metama'lumotlar Qo'shish

Symbollar DOM elementlariga ularning mavjud atributlari yoki xususiyatlariga xalaqit bermasdan metama'lumotlar biriktirish uchun ishlatilishi mumkin.

const element = document.createElement("div");

const dataKey = Symbol("elementData");
element[dataKey] = {
  type: "vidjet",
  config: {},
  timestamp: Date.now()
};

// Metama'lumotlarga kirish
console.log(element[dataKey].type); // Natija: vidjet

Bu yondashuv metama'lumotlarni elementning standart atributlaridan alohida saqlaydi, bu esa kodni qo'llab-quvvatlashni osonlashtiradi va CSS yoki boshqa JavaScript kodi bilan yuzaga kelishi mumkin bo'lgan ziddiyatlarning oldini oladi.

3. Maxfiy Xususiyatlarni Amalga Oshirish

JavaScript'da haqiqiy maxfiy xususiyatlar bo'lmasa-da, Symbollar maxfiylikni simulyatsiya qilish uchun ishlatilishi mumkin. Xususiyat kaliti sifatida Symbol dan foydalanib, tashqi kodning xususiyatga kirishini qiyinlashtirishingiz (lekin imkonsiz emas) mumkin.

class MyClass {
  #privateSymbol = Symbol("privateData"); // Eslatma: Bu '#' sintaksisi ES2020 da kiritilgan *haqiqiy* maxfiy maydon bo'lib, misoldan farq qiladi

  constructor(data) {
    this[this.#privateSymbol] = data;
  }

  getData() {
    return this[this.#privateSymbol];
  }
}

const myInstance = new MyClass("Maxfiy Ma'lumot");
console.log(myInstance.getData()); // Natija: Maxfiy Ma'lumot

// "Maxfiy" xususiyatga kirish (qiyin, lekin mumkin)
const symbolKeys = Object.getOwnPropertySymbols(myInstance);
console.log(myInstance[symbolKeys[0]]); // Natija: Maxfiy Ma'lumot

Object.getOwnPropertySymbols() Symbolni fosh qilishi mumkin bo'lsa-da, bu tashqi kodning "maxfiy" xususiyatga tasodifan kirishi yoki uni o'zgartirishi ehtimolini kamaytiradi. Eslatma: Haqiqiy maxfiy maydonlar (# prefiksidan foydalangan holda) hozirgi zamonaviy JavaScript'da mavjud va kuchliroq maxfiylik kafolatlarini taqdim etadi.

Symbollardan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar

Symbollar bilan ishlashda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

Xulosa

JavaScript Symbollari noyob xususiyat kalitlarini yaratish, obyektlarga metama'lumotlar biriktirish va obyekt xatti-harakatlarini moslashtirish uchun kuchli mexanizmni taklif etadi. Symbollarning qanday ishlashini tushunib va eng yaxshi amaliyotlarga rioya qilib, siz yanada mustahkam, qo'llab-quvvatlanadigan va to'qnashuvlarsiz JavaScript kodi yozishingiz mumkin. Plagin tizimlarini qurayotganingizda, DOM elementlariga metama'lumotlar qo'shayotganingizda yoki maxfiy xususiyatlarni simulyatsiya qilayotganingizda, Symbollar sizning JavaScript dasturlash ish jarayoningizni yaxshilash uchun qimmatli vosita bo'lib xizmat qiladi.