Javascript object.creation проблема в конкретном примере - PullRequest
1 голос
/ 19 февраля 2020

Скорее всего, это вопрос noob, но после прочтения парадигмы компонентов с помощью javascript я пытался создать простую систему компонентов для целей обучения.

Через некоторое время я пришел к чему-то похожему на код ниже, где различные экземпляры объекта Base должны содержать несколько компонентов в своем члене _Comp - для ясности, используя только один из них, чтобы легко просмотреть их и спросить, присутствует ли компонент:

    // Base
    const Base = {
        _sName:"",
        _Comp:{},           // To store components
    };

    // Component
    var Component = {
        Constructor:function( MyBase )
        {
            this._MyBase = MyBase;
        }
    };

    // Factory
    function CreateBase( sName )
    {
        let MyBase = Object.create( Base );
        MyBase._sName = sName;

        MyBase._Comp.Component = Object.create( Component );
        MyBase._Comp.Component.Constructor( MyBase );
        return MyBase;
    };

    // Create test Bases

    var A = CreateBase( "A" );
    var B = CreateBase( "B" );

    console.log( A._Comp.Component._MyBase._sName );
    console.log( B._Comp.Component._MyBase._sName );

Как вы можете видеть Я хочу, чтобы компоненты имели ссылку на свой держатель базы, чтобы иметь возможность доступа к базе в функциях компонента.

Но при запуске этого кода оба конечных журнала выводят «B».

Я ожидал "А" и "Б". Но так или иначе CreateBase («B») перезаписывает также объекты компонентов, ранее добавленные в A. Я пытаюсь понять, почему это происходит, и правильный / правильный способ сделать что-то подобное.

Любая помощь будет оценена.

1 Ответ

1 голос
/ 19 февраля 2020

Base используется в качестве прототипа для обоих объектов. Поскольку ни у одного из них нет собственного свойства _Comp, изменение _Comp на любое из них изменит его на Base, а не на унаследованные объекты. Чтобы объекты инкапсулировали свои собственные свойства, определите их для каждого из них:

 // Base
    const Base = {
        _sName:"",
        _Comp:{},           // To store components
    };

    // Component
    var Component = {
        Constructor:function( MyBase )
        {
            this._MyBase = MyBase;
        }
    };

    // Factory
    function CreateBase( sName )
    {
        let MyBase = Object.create(Base);
        MyBase._sName = sName;
        MyBase._Comp = {}; //Define _Comp on MyBase so any changes go here.


        MyBase._Comp.Component = Object.create( Component );
        MyBase._Comp.Component.Constructor( MyBase );
        return MyBase;
    };

    // Create test Bases

    var A = CreateBase( "A" );
    var B = CreateBase( "B" );

    console.log( A._Comp.Component._MyBase._sName );
    console.log( B._Comp.Component._MyBase._sName );
...