Question

我可能错了，但我的理解是这个

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

foo.baz(1);

应该正常工作，因为我注意不要将foo.baz定义为箭头函数，因此this内的baz等于foo。当然，当我在控制台上测试时，它可以按预期工作。

现在，我与React的设置非常相似，其中this由于某种原因未定义。这是代码：

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>                                                                                                                                                 
        );                                                                                                                                                            
    }
}

然后

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>
    );
}

我说他们应该是和蔼可亲的，但似乎并非如此。当然这不是什么问题，因为我可以将函数移到对象之外，然后this不需要引用它，但我很想知道实际发生了什么我无法重现错误。

如果重要，我会用Babel转换代码，输出是

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                                                                                                                                       
        });                                                                                                                                                           
    }
 }

这是由WebPack编译器创建的匿名函数。

Answer 1

正常this中的function值是根据函数的调用方式设置的。声明对象的方式的结构没有效果，只是foo.baz(1);将this设置为foo。

要打破它，

foo.baz(1);

相当于

let _tmp = foo;
_tmp.baz.call(_tmp, 1);

在这种情况下，只需使用_tmp就可以跳过foo。

在你的JSX案例中

<MapRoom.Disabled />

正在做

declareComponent(MapRoom.Disabled);

该函数只获取函数，例如

function declareComponent(someFunc){
    someFunc();
}

当函数被调用时，它只是一个函数，没有obj.someFunc会导致this成为obj，因此它最终成为undefined。

为了澄清，你的函数被声明为对象的属性这一事实对任何事都没有影响，它仍然只是一个函数，你应该确保用适当的{{1来调用函数如果你有一定的期望值。例如，你可以做

this

由于函数已经与显式上下文绑定，因此它可以按预期工作。

但是

const MapRoomDisabled = MapRoom.Disabled.bind(MapRoom);

<MapRoomDisabled />

与

没什么不同

var obj = {
    prop: function(){}
};

或

var obj = {
    prop: null
};
obj.prop = function(){};

＆＃39;这＆＃39;在对象中的函数（不是箭头）内未定义

1 个答案: