В предыдущем рассказе я говорил о переменных. Если вы хотите начать сначала, то нажмите здесь!
JavaScript разработан на основе простой объектно-ориентированной парадигмы. Объект — это набор свойств, а свойство — это связь между именем (или ключом) и значением. Значение свойства может быть функцией, и в этом случае свойство называется методом. В дополнение к объектам, предопределенным в браузере, вы можете определить свои собственные объекты.
Деструктуризация объекта
Деструктуризация объектов — это полезная функция JavaScript для извлечения свойств из объектов и привязки их к переменным.
Давайте сделаем пример объекта автомобиля. Объект car
имеет такие свойства, как brand
, и вложенные свойства, такие как config
:
const car = { brand: 'Volvo', productionYear: 2022, config: { transmission: 'manual', power: 115, parkAssist: false, } };
Чтобы получить доступ к значениям ключей в объекте автомобиля, вы можете просто использовать запись через точку или car[keyName]
// Don't ❌ const brand = car.brand const productionYear = car['productionYear'] console.log(brand) // Volvo console.log(productionYear) // 2022
Вышеприведенный пример представляет собой два вкладыша, вместо этого мы можем деструктурировать этот объект.
// Do ✅ const { brand: carBrand, productionYear } = car; console.log(carBrand) // Volvo console.log(productionYear) // 2022
Используйте геттеры и сеттеры
При доступе к данным лучше использовать геттеры и сеттеры, а не просто искать свойство объекта. Это обновит ваш код позже, это упростит добавление проверок.
В плохом примере мы можем получить доступ к свойству непосредственно из объекта.
// Don't ❌ function updateMileage(){ // ... return { mileage: 0; } } const car = updateMileage(); car.mileage = 100; console.log(car.mileage) // 100;
В хорошем примере используются геттеры и сеттеры. Сейчас мы не можем получить прямой доступ к переменной mileage, вместо этого у нас есть две функции для получения или установки значения объекта. Я вернул только функции getMileage и setMileage, я не вернул реальную переменную пробега.
// Do ✅ function updateMileage(){ let mileage = 0; function getMileage(){ return mileage; } function setMileage(value){ mileage = value; } return { getMileage, setMileage } } const car = updateMileage(); car.setMileage(100); console.log(car.getMileage()) // 100;
Используйте цепочку методов
Одним из самых полезных шаблонов в JavaScript является цепочка методов. Вы видите это во многих библиотеках, таких как jQuery и Lodash. Это позволяет вашему коду быть выразительным и менее многословным. По этой причине я говорю, используйте цепочку методов и посмотрите, насколько чистым будет ваш код. В ваших функциях класса просто возвращайте это в конце каждой функции, и вы можете связать с ней дополнительные методы класса.
// Don't ❌class Car { constructor(transmission, mileage, color) { this.transmission = transmission; this.mileage = mileage; this.color = color; }
setTransmission(transmission) { this.transmission = transmission; }
setMileage(mileage) { this.mileage = mileage; }
setColor(color) { this.color = color; }
save() { console.log(this.transmission, this.mileage, this.color); } }
const car = new Car('automatic', 150, 'yellow'); car.setColor('red'); car.save();
// Do ✅class Car { constructor(transmission, mileage, color) { this.transmission= transmission; this.mileage= mileage; this.color = color; }
setTransmission(transmission) { this.transmission= transmission; // Returning this for chaining return this; }
setMileage(mileage) { this.mileage= mileage;
// Returning this for chaining return this; }setColor(color) { this.color = color; // Returning this for chaining return this; }
save() { console.log(this.transmission, this.mileage, this.color); // Returning this for chaining return this; } }
const car = new Car(automatic', 150, yellow).setColor('red').save();
Это все для объектов. В следующей части вы найдете принципы чистого кода для функций.