В дополнение к моим предыдущим двум статьям о Javascript я хотел бы подумать об объектах и ​​работе с ними, с чем приходится иметь дело разработчикам не только в Javascript, но и в большинстве языков.

Объекты

Javascript вращается вокруг простой объектно-ориентированной парадигмы. И все мы знаем об объектах и ​​классах, наверное, мы работали с ними на протяжении всей нашей карьеры.

Объект — это набор свойств, а свойство — это атрибут этого объекта. Это очень похоже на нас, людей . У нас есть свои атрибуты, будь то наше имя, фамилия, дата рождения или рост и вес.

Объекты и объектно-ориентированное программирование на самом деле вдохновлены объектами из реальной жизни.

Следующие примеры представляют собой инструкции по работе с объектами, от простых до более сложных случаев.

Способы создания экземпляров объектов

Обычный способ создания экземпляров объектов следующий:

# Create new object
const site = {
    name: "Medium",
    domain: "medium.com",
    type: "Writing Platform"
}

# Create new object
const site = new Object();
site.name = "Medium";
site.domain = "medium.com";
site.type = "Writing Platform";

site['name'] = "Medium";

const propertyName = "name";
const propertyValue = "Medium";
site[propertyName] = propertyValue;

Классы

Работа с объектами не обходится без работы с классами.

Вы, скорее всего, знаете, как работают классы, поэтому вкратце — это шаблон для объектов, определяющий, какие свойства и функции выполняет экземпляр, т.е. объект будет иметь.

# Classes
class Website {
    constructor(name, domain, type){
        this.name = name;
        this.domain = domain;
        this.type = type;
    }
    // Getter
    get url() {
        return `https://www.${this.domain}`;
    }
    // Method
    sayHello() {
        return `Hello from ${this.name}!`;
    }
}
const medium = new Website("Medium",
    "medium.com",
    "Writing Platform");
const url = medium.url;
const greeting = medium.sayHello();

Однако интересна вещь, использование gettersкоторой определяется как getфункция. Его нельзя вызывать, как обычные функции, но он ведет себя как свойство.

Поля

Поля или свойства могут быть объявлены перед конструктором.

# Fields and Private Fields
class Website {
    name;
    domain;
    #type;
    
    constructor(name, domain, type){
        this.name = name;
        this.domain = domain;
        this.#type = type;
    }
}
const medium = new Website("Medium",
    "medium.com",
    "Writing Platform");

Генераторы и получение результатов

Генераторы и ключевое слово yield— это что-то относительно новое в Javascript. Ключевые yieldслова позволяют нам агрегировать и получать результаты внутри цикла — то, что не так распространено в других языках, но присутствует в C# уже довольно давно.

# Generator and Yielding results
class Website {
    constructor(tabs) {
        this.tabs = tabs;
    }
*getTabs() {
        for(const tab of this.tabs){
            yield tab;
    }
}

const medium = new Website(["Home",
    "Recent","About Us",
    "Register"]);
const generator = medium.getTabs();
const tabs = [...generator];

Расширение классов

Классы также могут быть расширены в Javascript.

# Extending Classes
class BaseWebsite {
    constructor(name, domain, type){
        this.name = name;
        this.domain = domain;
        this.type = type;
    }
 
    sayHello() {
        return "Hello!";
    }
}
class HttpsWebsite extends BaseWebsite {
    constructor(name, domain, type){
        super(name, domain, type);
        this.scheme = 'https';
    }
    
    sayHello() {
        let superHello = super.sayHello();
        return `${superHello} from ${this.name}`;
    }
}
const medium = new HttpsWebsite("Medium",
    "medium.com",
    "Writing Platform");
    
const hello = medium.sayHello();

Вызовы методов базового класса

Обратите внимание, что в вышеупомянутом примере мы также можем объявить базовую функцию sayHello, переопределить ее, но при этом использовать ее с superключевым словом. То же самое делается и внутри constructor.

Примеси

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

Тем не менее, мы можем использовать и использовать Mix-ins для достижения этой цели. Рассмотрим следующий пример

# Mixins
let WalkMixin = superclass => class extends superclass {
  walk() {
      return "I'm walking!";
  }
};
let FlyMixin = superclass => class extends superclass {
  fly() {
      return "I'm flying!";
  }
};
class BaseClass {}
class SampleClass extends WalkMixin(FlyMixin(BaseClass)) {};
const sample = new SampleClass();
console.log(sample.walk());
console.log(sample.fly());

Обратите внимание, что это не функция Javascript, а скорее обходной путь.

Я надеюсь, что вы нашли эту статью полезной и приятной. Это часть серии статей о концепциях Javascript, которые я недавно начал писать, так что настройтесь! Если вам нравится контент, нажмите «Подписаться» и присоединяйтесь ко мне в путешествии по исследованиям и написанию новых статей о науке и технике, лежащих в основе Javascript.

Спасибо за чтение!