ES6: Constructor's parameter has been changed before explicitly used

Question

In the below code, the ParentClass class receives the argument from ChildClass (in the real project, ParentClass and ChildClass are in separate files, and CSS_CLASSES is declared in ChildClass file).

class ParentClass {

    constructor(CSS_CLASSES, mode){ 

        if (mode === 'call getCssClassesSelectors') {

            this.CSS_CLASS_SELECTORS = ParentClass.getCssClassesSelectors(CSS_CLASSES);    

        }
        else if (mode === 'dont call getCssClassesSelectors'){
            console.log(CSS_CLASSES);   
        }
    }

    static getCssClassesSelectors(CSS_CLASSES) {

        let outputObjectWorkpiece = Object.assign({}, CSS_CLASSES);

        // local same-name function 
        function getCssClassesSelectors(outputObjectWorkpiece){
            for (let key in outputObjectWorkpiece){

                if (outputObjectWorkpiece.hasOwnProperty(key)) {

                    if (typeof(outputObjectWorkpiece[key]) === 'string') {
                        outputObjectWorkpiece[key] = '.' + outputObjectWorkpiece[key];
                    }
                    else if (typeof(outputObjectWorkpiece[key]) === 'object'){
                        getCssClassesSelectors(outputObjectWorkpiece[key]);
                    }
                }
            }

            return outputObjectWorkpiece;
        }

        return getCssClassesSelectors(outputObjectWorkpiece);

    }
}

class ChildClass extends ParentClass { 

    constructor() {   
        super(CSS_CLASSES, 'call getCssClassesSelectors');

    } 
}

let CSS_CLASSES = {
    pageWrapper: 'pageWrapper',
    header: {
        wrapper: 'header-wrapper',
        logo: 'header-logo'
    },
    signInForm: {
        wrapper: 'main-innerWrapper',
        inputField: 'signInForm-inputField',
        button: 'signInForm-inputField'
    }
};

let testInstance = new ChildClass();

CSS_CLASS is the object with obviously contains css classes in unknown in advance nesting levels. The parent class must to convert all classes to CSS selectors, more concretely, add '.' to each CSS_CLASSES property in all nesting levels.

I added the mode parameter to demonstrate the problem.

Problem

If we call this.ccs = Resource.getCssClassesSelectors(CSS_CLASSES), the CSS_CLASSES in the previous row already becomes to selectors ('.' will we added to each property):

 if (mode === 'call getCssClassesSelectors') {

    console.log(CSS_CLASSES);
    // all properties already becomes to selectors!!! But how?

    this.ccs = ParentClass.getCssClassesSelectors(CSS_CLASSES);  

}

I tried the next fiddle:

let parent = { a: 1 };
let child = Object.assign({}, parent);
child.a = 2;

console.log(parent); // { a : 1}
console.log(child); // { a : 2}

Now problem: the child is independent. So here in my case the problem has another origin...

You're only creating a *shallow* copy of the object, all the nested objects within it aren't copied. — deceze, Nov 24 '17 at 08:42
Thank you for the comment. In the one of answer on "What is the most efficient way to deep clone an object in JavaScript?" it was told that `Object.assign({}, obj);` is the deep copy. Where is the logic error? — Takeshi Tokugawa YD, Nov 24 '17 at 09:04
*Which* answer says that `Object.assign` creates a deep copy? — deceze, Nov 24 '17 at 09:05
[This answer](https://stackoverflow.com/a/43188775/4818123), clause 1; has 32 upvotes. — Takeshi Tokugawa YD, Nov 24 '17 at 09:07
Indeed! So, the concisest method is `jQuery.extend(true, {}, oldObject);`, is't it? — Takeshi Tokugawa YD, Nov 24 '17 at 09:15

ES6: Constructor's parameter has been changed before explicitly used

Problem

0 Answers0