Почему это возвращает undefined?

Question

var TTT = { 
     canvas  : document.getElementById('canvas'), 
     ctx   : canvas.getContext('2d'), 
     cH   : 600, 
     cW   : 600, 
     // tile dimensions 
     tH   : this.cH/3, 
     tW   : this.cW/3 
    }; 

// returns undefined... why? 
console.log(TTT.tH); 

Это должно быть что-то очень простое, но я не могу понять, почему это не определено ...

Answer 1

При установке TTT.tH и tW, this относится к окружающим контекстом, а не сам объект , Вы не можете установить его на TTT.cH на данный момент либо, потому что он еще не определен. То, что вы можете сделать, это установить их после того, как объект изначально определен.

var TTT = { 
     canvas  : document.getElementById('canvas'), 
     ctx   : canvas.getContext('2d'), 
     cH   : 600, 
     cW   : 600 
    }; 

// tile dimensions 
TTT.tH = TTT.cH/3; 
TTT.tW = TTT.cW/3; 

// returns undefined... why? 
console.log(TTT.tH); 

EDIT: Как было отмечено в комментарии по Ориоль, вы должны сделать это, а также для TTT.ctx, поскольку canvas пока не определен.

Answer 2

В дополнение к ответу, который я разместил above, есть второй, совершенно другой способ сделать это. Это с помощью getters and setters.

Если вы не заботитесь о том, в состоянии сбросить TTT.tH и TTT.tW на более позднем этапе, вы можете просто определить их как добытчики:

var TTT = { 
     canvas  : document.getElementById('canvas'), 
     ctx   : canvas.getContext('2d'), 
     cH   : 600, 
     cW   : 600, 
     // tile dimensions 
     get tH() { return this.cH/3 }, 
     get tW() { return this.cW/3 } 
    }; 

// returns undefined... why? 
console.log(TTT.tH); 

Здесь он определяется как функция, и поэтому this будет действительно работают там.