Объектно-ориентированный JavaScript: глубокое погружение в классы ES6

Часто нам нужно представить идею или концепцию в наших программах — например, автомобильный двигатель, компьютерный файл, маршрутизатор или показание температуры. Представление этих концепций непосредственно в коде состоит из двух частей: данные для представления состояния и функции для представления поведения. Классы ES6 предоставляют нам удобный синтаксис для определения состояния и поведения объектов, которые будут представлять наши концепции.

Классы ES6 делают наш код более безопасным, гарантируя, что будет вызываться функция инициализации, и они облегчают определение фиксированного набора функций, которые работают с этими данными и поддерживают действительное состояние. Если вы можете думать о чем-то как об отдельной сущности, вероятно, вам следует определить класс, который будет представлять эту «вещь» в вашей программе.

Рассмотрим этот неклассный код. Сколько ошибок вы можете найти? Как бы вы их исправить?

// set today to December 24 const today = { month: 24, day: 12, }; const tomorrow = { year: today.year, month: today.month, day: today.day + 1, }; const dayAfterTomorrow = { year: tomorrow.year, month: tomorrow.month, day: tomorrow.day + 1 <= 31 ? tomorrow.day + 1 : 1, }; 

today дата недействительна: месяца нет 24. Кроме того, today не полностью инициализирован: пропущен год. Было бы лучше, если бы у нас была функция инициализации, которую нельзя было бы забыть. Также обратите внимание, что при добавлении дня мы проверяли в одном месте, если мы вышли за пределы 31, но пропустили этот чек в другом месте. Было бы лучше, если бы мы взаимодействовали с данными только через небольшой и фиксированный набор функций, каждая из которых поддерживает действительное состояние.

Вот исправленная версия, которая использует классы.

 class SimpleDate { constructor(year, month, day) { // Check that (year, month, day) is a valid date // ... // If it is, use it to initialize "this" date this._year = year; this._month = month; this._day = day; } addDays(nDays) { // Increase "this" date by n days // ... } getDay() { return this._day; } } // "today" is guaranteed to be valid and fully initialized const today = new SimpleDate(2000, 2, 28); // Manipulating data only through a fixed set of functions ensures we maintain valid state today.addDays(1); 

Конструкторы

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

Хранить данные в секрете

Мы стараемся спроектировать наши классы так, чтобы их состояние гарантированно было действительным. Мы предоставляем конструктор, который создает только допустимые значения, и разрабатываем методы, которые также всегда оставляют только допустимые значения. Но пока мы оставляем данные наших классов доступными для всех, кто- то испортит их. Мы защищаемся от этого, сохраняя данные недоступными, кроме как через предоставляемые нами функции.

JARGON TIP: Хранение данных в секрете называется инкапсуляция .

Конфиденциальность с конвенциями

К сожалению, свойства закрытого объекта не существуют в JavaScript. Мы должны подделать их. Наиболее распространенный способ сделать это — придерживаться простого соглашения: если имя свойства имеет префикс подчеркивания (или, реже, суффикс подчеркивания), то оно должно рассматриваться как закрытое. Мы использовали этот подход в предыдущем примере кода. Обычно это простое соглашение работает, но технически данные все еще доступны каждому, поэтому мы должны полагаться на собственную дисциплину, чтобы поступать правильно.

Конфиденциальность с использованием привилегированных методов

Следующим наиболее распространенным способом подделки свойств частного объекта является использование в конструкторе обычных переменных и их захват в замыканиях. Этот трюк дает нам по-настоящему конфиденциальные данные, недоступные извне. Но чтобы это работало, методы нашего класса сами должны быть определены в конструкторе и присоединены к экземпляру:

 class SimpleDate { constructor(year, month, day) { // Check that (year, month, day) is a valid date // ... // If it is, use it to initialize "this" date's ordinary variables let _year = year; let _month = month; let _day = day; // Methods defined in the constructor capture variables in a closure this.addDays = function(nDays) { // Increase "this" date by n days // ... } this.getDay = function() { return _day; } } } 

Конфиденциальность с символами

Символы являются новой функцией JavaScript с ES6, и они дают нам еще один способ подделать свойства частного объекта. Вместо подчеркивания имен свойств мы могли бы использовать уникальные ключи объектов символов, и наш класс может захватывать эти ключи в замыкании. Но есть утечка. Еще одна новая функция JavaScript — Object.getOwnPropertySymbols , и она позволяет извне получать доступ к символьным клавишам, которые мы пытались сохранить в Object.getOwnPropertySymbols :

 const SimpleDate = (function() { const _yearKey = Symbol(); const _monthKey = Symbol(); const _dayKey = Symbol(); class SimpleDate { constructor(year, month, day) { // Check that (year, month, day) is a valid date // ... // If it is, use it to initialize "this" date this[_yearKey] = year; this[_monthKey] = month; this[_dayKey] = day; } addDays(nDays) { // Increase "this" date by n days // ... } getDay() { return this[_dayKey]; } } return SimpleDate; }()); 

Конфиденциальность с помощью слабых карт

Слабые карты также являются новой функцией JavaScript. Мы можем хранить свойства частного объекта в парах ключ / значение, используя наш экземпляр в качестве ключа, и наш класс может захватывать эти карты ключ / значение в замыкании:

 const SimpleDate = (function() { const _years = new WeakMap(); const _months = new WeakMap(); const _days = new WeakMap(); class SimpleDate { constructor(year, month, day) { // Check that (year, month, day) is a valid date // ... // If it is, use it to initialize "this" date _years.set(this, year); _months.set(this, month); _days.set(this, day); } addDays(nDays) { // Increase "this" date by n days // ... } getDay() { return _days.get(this); } } return SimpleDate; }()); 

Другие модификаторы доступа

Есть и другие уровни видимости, помимо «частного», которые вы найдете на других языках, например «защищенный», «внутренний», «закрытый пакет» или «друг». JavaScript все еще не дает нам возможности обеспечить эти другие уровни видимости. Если они вам нужны, вам придется полагаться на условности и самодисциплину.

Ссылаясь на текущий объект

Посмотрите еще раз на getDay() . Он не указывает никаких параметров, так как он узнает объект, для которого он был вызван? Когда функция вызывается как метод с использованием нотации object.function , существует неявный аргумент, который используется для идентификации объекта, и этот неявный аргумент присваивается неявному параметру с именем this . Чтобы проиллюстрировать это, вот как мы должны передавать объектный аргумент явно, а не неявно:

 // Get a reference to the "getDay" function const getDay = SimpleDate.prototype.getDay; getDay.call(today); // "this" will be "today" getDay.call(tomorrow); // "this" will be "tomorrow" tomorrow.getDay(); // same as last line, but "tomorrow" is passed implicitly 

 class SimpleDate { static setDefaultDate(year, month, day) { // A static property can be referred to without mentioning an instance // Instead, it's defined on the class SimpleDate._defaultDate = new SimpleDate(year, month, day); } constructor(year, month, day) { // If constructing without arguments, // then initialize "this" date by copying the static default date if (arguments.length === 0) { this._year = SimpleDate._defaultDate._year; this._month = SimpleDate._defaultDate._month; this._day = SimpleDate._defaultDate._day; return; } // Check that (year, month, day) is a valid date // ... // If it is, use it to initialize "this" date this._year = year; this._month = month; this._day = day; } addDays(nDays) { // Increase "this" date by n days // ... } getDay() { return this._day; } } SimpleDate.setDefaultDate(1970, 1, 1); const defaultDate = new SimpleDate(); 

 class Employee { constructor(firstName, familyName) { this._firstName = firstName; this._familyName = familyName; } getFullName() { return `${this._firstName} ${this._familyName}`; } } class Manager { constructor(firstName, familyName) { this._firstName = firstName; this._familyName = familyName; this._managedEmployees = []; } getFullName() { return `${this._firstName} ${this._familyName}`; } addEmployee(employee) { this._managedEmployees.push(employee); } } 

 // Manager still works same as before but without repeated code class Manager extends Employee { constructor(firstName, familyName) { super(firstName, familyName); this._managedEmployees = []; } addEmployee(employee) { this._managedEmployees.push(employee); } } 

 class Rectangle { set width(w) { this._width = w; } get width() { return this._width; } set height(h) { this._height = h; } get height() { return this._height; } } // A function that operates on an instance of Rectangle function f(rectangle) { rectangle.width = 5; rectangle.height = 4; // Verify expected result if (rectangle.width * rectangle.height !== 20) { throw new Error("Expected the rectangle's area (width * height) to be 20"); } } // A square IS-A rectangle... right? class Square extends Rectangle { set width(w) { super.width = w; // Maintain square-ness super.height = w; } set height(h) { super.height = h; // Maintain square-ness super.width = h; } } // But can a rectangle be substituted by a square? f(new Square()); // error 

 class Employee { constructor(firstName, familyName) { this._firstName = firstName; this._familyName = familyName; } getFullName() { return `${this._firstName} ${this._familyName}`; } } class Group { constructor(manager /* : Employee */ ) { this._manager = manager; this._managedEmployees = []; } addEmployee(employee) { this._managedEmployees.push(employee); } } 

 // This will be our common superclass class Cache { get(key, defaultValue) { const value = this._doGet(key); if (value === undefined || value === null) { return defaultValue; } return value; } set(key, value) { if (key === undefined || key === null) { throw new Error('Invalid argument'); } this._doSet(key, value); } // Must be overridden // _doGet() // _doSet() } // Subclasses define no new public methods // The public interface is defined entirely in the superclass class ArrayCache extends Cache { _doGet() { // ... } _doSet() { // ... } } class LocalStorageCache extends Cache { _doGet() { // ... } _doSet() { // ... } } // Functions can polymorphically operate on any cache by interacting through the superclass interface function compute(cache) { const cached = cache.get('result'); if (!cached) { const result = // ... cache.set('result', result); } // ... } compute(new ArrayCache()); // use array cache through superclass interface compute(new LocalStorageCache()); // use local storage cache through superclass interface 

 // ES5 function B() {} Bf = function () {}; function D() {} D.prototype = Object.create(B.prototype); Df(); // error 

 // ES6 class B { static f() {} } class D extends B {} Df(); // ok 

 // ES5 function D() { Array.apply(this, arguments); } D.prototype = Object.create(Array.prototype); var d = new D(); d[0] = 42; d.length; // 0 - bad, no array exotic behavior 

 // ES6 class D extends Array {} let d = new D(); d[0] = 42; d.length; // 1 - good, array exotic behavior 

 const transmitter = { transmit() {} }; const receiver = { receive() {} }; // Create a proxy object that intercepts property accesses and forwards to each parent, // returning the first defined value it finds const inheritsFromMultiple = new Proxy([transmitter, receiver], { get: function(proxyTarget, propertyKey) { const foundParent = proxyTarget.find(parent => parent[propertyKey] !== undefined); return foundParent && foundParent[propertyKey]; } }); inheritsFromMultiple.transmit(); // works inheritsFromMultiple.receive(); // works 

 function makeTransmitterClass(Superclass = Object) { return class Transmitter extends Superclass { transmit() {} }; } function makeReceiverClass(Superclass = Object) { return class Receiver extends Superclass receive() {} }; } class InheritsFromMultiple extends makeTransmitterClass(makeReceiverClass()) {} const inheritsFromMultiple = new InheritsFromMultiple(); inheritsFromMultiple.transmit(); // works inheritsFromMultiple.receive(); // works