Классы объектов JS

Классы объектов Javascript — это функции-конструкторы, которые создают классы объектов или структуры данных. Эти функции конструктора класса возвращают объекты, являющиеся экземплярами класса.

Шаблон функционального класса

Шаблоны функциональных классов — это функции-конструкторы, в которых объект, его свойства «класса» и его методы объявляются в одной и той же функции.

var Human = function(hairColour, height) {
    
    var obj = {};
    obj.hairColour = hairColour;
    obj.height = height;
    obj.dyeBrown = function() {
        obj.hairColour = 'brown';
    };
    return obj;
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

Шаблон функционально-разделяемого класса

Функциональные общие шаблоны классов предназначены для предотвращения дублирования создания методов объекта, объявленных внутри функций-конструкторов. В приведенном выше примере функцияdyBrown запускается и создается каждый раз, когда вызывается Human. Чтобы предотвратить это, мы инкапсулируем определения функций в объект вне функции-конструктора. Мы будем называть этот объект «методами» в приведенном ниже примере. Затем мы будем использовать _.extend для копирования пар ключ-значение из объекта методов в новый объект, созданный в Human.

var Human = function(hairColour, height) {
    var obj = {};
    obj.hairColour = hairColour;
    obj.height = height;
    _.extend(obj, methods);
    return obj;
};
var methods = {};
methods.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

Мы должны использовать ключевое слово this для доступа к экземпляру объекта в определениях функций, так как функции больше не будут иметь доступ к области закрытия для конструктора «obj». В этом случае this будет относиться к экземпляру объекта, из которого вызывается метод; в приведенном выше примере «это» относится к «Джон».

Цепи прототипов

Чтобы скопировать свойства из одного объекта в другой, мы можем использовать _.extend(destinationObject, sourceObject), которая не является собственной функцией JS, но часто доступна из jQuery. _.extend(obj, method) создает только однократное копирование свойства объекта методов в объект obj.

С другой стороны, использование var obj = Object.create(methods) обеспечивает непрерывное делегирование времени поиска между объектом 'obj' и объектными методами. Любой вызов свойства или метода obj, который не найден в его экземпляре, делегирует вызов объекту methods. Это позволяет 'obj' наследовать свойства и методы от 'методов' и позволяет избежать дублирования свойств или методов для каждого экземпляра 'obj'. . Таким образом, массив является объектом класса «массив» и наследует определенные свойства и методы от прототипа объекта. Использование Object.create автоматически создает объект методов obj.prototype, который не нужно объявлять и который можно использовать для хранения методов вне функции конструктора.

var Human = function(hairColour, height) {
    var obj = Object.create(Human.prototype);
    obj.height = height;
    obj.hairColour = hairColour;
    return obj;
};
Human.prototype.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

var Human = function(hairColour, height) {
    var obj = Object.create(methods);
    obj.height = height;
    obj.hairColour = hairColour;
    return obj;
};
var methods = {};
methods.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = Human('red', 180);
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'

var Human = function(hairColour, height) {
// this = Object.create(Human.prototype);=>automatically implemented
    this.height = height;
    this.hairColour = hairColour;
// return this;=>automatically implemented
};
Human.prototype.dyeBrown = function() {
    this.hairColour = 'brown';
};
var John = new Human('red', 180); // insert keyword new 
John.dyeBrown();
console.log(John.hairColour); //returns 'brown'