'this' is undefined inside function (not arrow) in object

Viewed 3477

I may be wrong but my understanding is that this

var foo = {                                                                                                                                                           
    'bar': x => x + 1,                                                                                                                                                
    'baz': function(y){ return this.bar(y); }                                                                                                                         
};                                                                                                                                                                    

foo.baz(1);

should work fine since I took care not to define foo.baz as an arrow function and so this inside baz is equal to foo. Of course, when I test it on a console it works as I expected.

Now, I have a very similar setup with React in which this gets undefined for some reason. This is the code:

const MapRoom = {                                                                                                                                                     
    'getStyleFromCoords': coords => {                                                                                                                                 
        return {  // account for borders                                                                                                                              
            'left': coords[0] + 1,                                                                                                                              
            'top': coords[1] + 1,                                                                                                                               
            'width': (coords[2] - coords[0]) - 2,                                                                                                         
            'height':(props.coords[3] - props.coords[1]) - 2,                                                                                                         
        };                                                                                                                                                            
    },                                                                                                                                                                
    'Disabled': function(props){                                                                                                                                      
        console.log('this', this);  // undefined                                                                                                                                    
        const style = this.getStyleFromCoords(props.coords);  // error                                                                                                           

        return (                                                                                                                                                      
            <div                                                                                                                                                      
              className="room-selected"                                                                                                                               
              style={style}                                                                                                                                           
              title={props.number}                                                                                                                                    
              ></div>                                                                                                                                                 
        );                                                                                                                                                            
    }
}

and then

renderRooms(){                                                                                                                                                        
    // stuff                                                                                               

    return this.state.coords.map((coords, index) => {                                                                                                                 
        // more stuff
        if(disabled){                                                                                                                                                                 
            return (                                                                                                                                                                      
                <MapRoom.Disabled                                                                                                                                                           
                    key={roomNumber}                                                                                                                                    
                    number={roomNumber}                                                                                                                                                       
                    coords={coords}                                                                                                                                     
                   />                                                                                                                                                  
            );                                                                                                                                                        
        } else if(...){}
    });
}

render(){
    return (
        <stuff>
            {this.renderRooms()}
        </stuff>
    );
}                                                                                                                                                                                                                                                                               

I'd say they should be analagous, but it seems that's not the case. Of course this is not much problem since I can just move the function outside the object and then there's no need for this to reference it, but I'm curious to know what is actually happening since I'm unable to reproduce the error.

In case it matters, I'm transpiling the code with Babel and the output is

var MapRoom = {                                                                                                                                                       
    'getStyleFromCoords': function getStyleFromCoords(coords) {                                                                                                       
        return { // account for borders                                                                                                                               
            'left': coords[0] + 1,                                                                                                                              
            'top': coords[1] + 1,                                                                                                                               
            'width': coords[2] - coords[0] - 2,                                                                                                           
            'height': coords[3] - coords[1] - 2                                                                                                           
        };                                                                                                                                                            
    },                                                                                                                                                                
    'Disabled': function Disabled(props) {                                                                                                                            
        console.log('this', this);                                                                                                                                    
        var style = this.getStyleFromCoords(props.coords);                                                                                                                 

        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', {                                                                                   
            className: 'room-selected',                                                                                                                               
            style: style,                                                                                                                                             
            title: props.number                                                                                                                                       
        });                                                                                                                                                           
    }
 }  

This is inside an anonymous function created by WebPack compiler.

1 Answers
Related