ООО «ПРкениг»
236006 Калининград Московский проспект 40
8 (4012) 39 09 55
info@pr-kenig.ru,

Конструктор в объектах JavaScript (js)

Конструктор в объектах JavaScript (js)
Конструктор в объектах JavaScript (js)
Автор Дмитрий Грозный Дмитрий Грозный 14/08/2018

Приемы, которые я использую при создании конструкторов в объектах JavaScript. Наследование.

Рассмотрим 3 варианта родительских объекта и примеры взаимодействия с ними:

  • Родитель - динамический объект
  • Родитель - уже созданный объект
  • Родитель - статичный объект
  • Объект унаследованный от родителя (дочерний объект)
  • Пример использования переопределения методов и свойств родительского объекта в дочернем. JSDOC - как важная составляющая данного подхода.

Нужно понимать, что в js конструктором является объект, который создал сам объект. Ссылка на конструктор (как на объект) доступна в родительском и дочерних объектах.

var ParentObject = (function () {
    var Constructor = function () {};
    Constructor.constructorMethod = function () {};
    return Constructor;
})();
var Object = function () {
    this.__proto__ = new ParentObject();
    this.constructor.constructorMethod();
};

Однако в следующем примере, под конструктором мы понимаем как некую переменную, которая самовызывается с помощью конструкции var example = (function () {})();


Родитель - динамический объект

var BaseObject = function (arg1) {
    var t = this;
    // private
    var number = 1;
    // public
    this.text = 'text';
    // public method
    this.myFunctionPublic = function () {
        console.log('myFunctionPublic BaseObject');
        return t.text;
    };
    // private method
    var myFunctionPrivate = function () {
        console.log('myFunctionPrivate');
    };
    // constructor
    this.constructor = (function () {
        myFunctionPrivate();
        t.myFunctionPublic();
        console.log('number', number);
        console.log('text', t.text);
        console.log('this', t);
        console.log('arg1', arg1);
    })();
};


Родитель - уже созданный объект

var CreatedBaseObjectDynamic = (function () {
    // private property
    var number = 1;
    // private method
    var privateMethod = function () {
        console.log('privateMethod');
    };
    // constructor
    var object = function () {
        //base object public property
        this.name = 'name';
        //base object public method
        this.myFunctionPublic = function () {
            console.log('myFunctionPublic');
        };
        //run constructor method
        this.constructor.constructorMethod();
    };
    //constructor public property
    object.constructor_property = 'constructor_property';
    //constructor public method
    object.constructorMethod = function () {
        return number;
    };
    //add base object public property
    object.prototype.add_object_property = 'add_object_property';
    //add base object public method
    object.prototype.myFunctionPublic2 = function () {
        console.log('myFunctionPublic2');
    };
    //run constructor
    return object;
})();


Родитель - статичный объект

var BaseObjectStatic = {
    // public
    text: 'text',
    get title() { return 'title';},
    // public
    myFunctionPublic: function () {
        console.log('myFunctionPublic BaseObjectStatic');
    }
};

Объект унаследованный от родителя (Несколько примеров)

var MyObject = function () {
    // extends dynamic object
    this.__proto__ = new BaseObject('argument 1');
    // OR extends static object
    this.__proto__ = BaseObjectStatic;
    // OR extends created dynamic object
    this.__proto__ = new CreatedBaseObjectDynamic();
    // public property
    this.text = 'new text';
    // public method
    this.myFunctionPublic = function () {
        this.__proto__.myFunctionPublic();
        console.log('myFunctionPublic MyObject');
        console.log('text;', this.text);
    };
};


Создание экземпляра

var instance = new MyObject();
instance.myFunctionPublic();

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

/**
 * Родительский объект (Статичный)
 * @property {BaseObject} static
 */
var BaseObject = {
    static: null,
    EVENT_CUSTUM: 'custom',
    variable: 'variable',
    init: function () {
        // Запишем в переменную «static» ссылку на объект, который вызвал данный метод
        BaseObject.static = this;
        this.firstMethod();
    },
    firstMethod: function () {
        this.static.secondMethod();
    },
    secondMethod: function () {
        $(window).trigger(this.static.EVENT_CUSTUM, this.static.variable);
    }
};
/**
 * Дочерний объект
 */
var MyObject = function(){
    // Наследуемся от BaseObject
    this.__proto__ = BaseObject;
    var t = this;
    t.variable = 'variable child';
    // Переопределим родительский метод
    t.firstMethod = function() {
        t.__proto__.firstMethod();
        t.thirdMethod();
    };
    t.thirdMethod = function() {
        console.log('END');
    };
    t.NewObject = new function(){
        var _key = 'key';
        Object.defineProperty(this, 'data', {
            /** @returns {DataCartAbstract | null} */
            get: function() {
                var value = localStorage.getItem(_key);
                return JSON.parse(value);
            },
            set: function (v) {
                v = JSON.stringify(v);
                return localStorage.setItem(_key, v);
            }
        });
    };
    // autorun method init
    t.init();
};
var instance = new MyObject();

Данный подход хорош для создания универсальных скриптов под любые проекты. 

Например: 

  • на сайте https://klops.ru я использовал базовый объект, который инициализирует события при определении (смены) сетки bootstrap.
  • на сайте http://ambar39.ru применяется базовый объект, который кладет товар в избранное или в корзину.

js

Просмотров: 641

Заказать проект

Наша команда профессионалов готова реализовать ваши проекты, заполните форму: