ПРИГОТОВЬТЕСЬ… и НАЧНИТЕ :)

Все мы знаем, что в JS есть объекты, но знаем ли мы объекты?

Знаете ли вы, что есть два типа свойств объектов, которые можно найти в JS?

Первый тип — это данные📝.

Это как-то само собой разумеющееся…

console.log(obj.age)

Второе — это свойство доступа. 🔐

Есть в основном функции, которые выполняются при получении и установке значений объекта.

У них есть зарезервированные слова set и get . Давайте посмотрим на них в действии…

let person = {
 get propertyName() {
   // code goes here
 }
set propertyName(value) {
   //code goes here
 }
}

То, как они работают, довольно просто, это действительно похоже на любой другой язык ООП, который мы все знаем и любим C#/JAVA/C++ … 💿

Например :

let dog = {
  name: 'Marco'
  favToy: 'Rubber Chicken'
}

Давайте добавим жетон….

let dog = {
  name: 'Marco'
  favToy: 'Rubber Chicken'
  get dogTag() {
    return `${this.name}`+ " loves his "+ `${this.favToy}`
  }
}
console.log(dog.dogTag) // Marco loves his Rubber Chicken

Снаружи свойство-аксессор выглядит как обычное. Вот в чем идея… Это называется не функцией, а свойством.

С другой стороны, если это свойство, то давайте попробуем присвоить ему значение...

let dog = {
  name: 'Marco'
  favToy: 'Rubber Chicken'
 get dogTag(){
    return `${this.name}`+ " loves his "+ `${this.favToy}`
 }
}
dog.dogTag = 'Blanko loves his blanket' // Error (property has only a getter)

Чтобы исправить это, мы должны добавить сеттердля dogTagproperty.

let dog = {
  name: 'Marco'
  favToy: 'Rubber Chicken'
get dogTag(){
    return `${this.name}`+ " loves his "+ `${this.favToy}`
 }
set dogTag(value){
 [this.name, this.favToy] = value.split("loves his");
 }
}
dog.dogTag = 'Blanko loves his blanket'
console.log(dog.name) // Blanko
console.log(dog.favToy) // blanket

В конце концов, у нас есть свойство, доступное для чтения и записи 💡

Мы можем сделать нечто другое, более общее, чем использование текущего экземпляра объекта и определение его свойств.

let dog={
  name: 'Marco'
  favToy: 'Rubber Chicken'
}
Object.defineProperty(dog, 'dogTag', {
 get () {
  return `${this.name}`+ " loves his "+ `${this.favToy}`
 }
 set (value) {
  [this.name, this.favToy] = value.split('loves his');
 }
console.log(dog.dogTag)// Marko loves his Rubber Chicken

Одно важное замечание о свойствах заключается в том, что мы можем определить свойство доступа get/set или свойство данных, но не то и другое одновременно.

Если мы попытаемся использовать как аксессоры, так и значения, мы получим ошибку недопустимого свойства.

Чтобы перейти к следующему шагу в методах доступа, мы можем вставить в них некоторую логику, чтобы защитить их от нежелательных значений… 🐶