JavaScript with keyword this

Question

I have a component called ColorPicker to display 4 colors through states. I used bind to point showColor() to ColorPicker but in state.colors.map() keyword this didn't work.But when I call an arrow function in map() it works.Can some someone explain it to me.Thanks a lot

  class ColorPicker extends Component {
        constructor(props){
            super(props);
            this.state={
                colors:['red','green','blue','#ccc']
            };
            this.showColor=this.showColor.bind(this);
        }
        showColor=(color) =>{
            return{
                backgroundColor:color
            };
        };
        render() {
            var elementColors=this.state.colors.map(function(color,index){
                return <span key={index} style={this.showColor(color)}></span>
            });
            return (
                <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <div className="panel panel-primary">
                            <div className="panel-heading">
                                <h3 className="panel-title">Color Picker</h3>
                             </div>
                        <div className="panel-body">
                            {elementColors}
                            <hr/>
                        </div>
                        </div>
                </div>
            );
        }
    }