Cannot read property 'decomposeTextShadow' of undefined

Question

I have the following object:

var decomposer = {
        decomposeColor: function(color) {

        },
        removeColor: function(code) {
        },
        decomposeTextShadow: function(code) {

        },

        //This line causes an error
        decomposeBoxShadow:this.decomposeTextShadow,
        decomposeRadius: function(code) {
        }
    };

However when I load my page chrome dev tools give me an error saying Cannot read property 'decomposeTextShadow' of undefined at the line that I have added a comment before in my code.Any ideas? Even if i try decomposeBoxShadow:decomposer.decomposeTextShadow,

score 2 · Answer 1 · answered Jan 10 '17 at 17:53

2

In your case this not refer to the decomposer object. It is undefined.

answered Jan 10 '17 at 17:53

Suren Srapyan

66,568
14
114
112

score 1 · Accepted Answer · edited May 23 '17 at 11:52

It seems like the code is contained in a strict mode function. In a strict function, this is undefined if called "normally".

See Self-references in object literal declarations for a solution to what I believe you are trying to do.

Even if i try decomposeBoxShadow:decomposer.decomposeTextShadow

You are trying to access decomposer.decomposeTextShadow during the initialization of the object itself. The object is only assigned to decomposer after it was created. Therefore, during the creation of the object, decomposer still has the value undefined.

Cannot read property 'decomposeTextShadow' of undefined

2 Answers2