無法在Javascript中兩次詢問對象屬性

Question

原諒我可能糟糕的javascript代碼。 這是我第一次嘗試使用javascript ...

function Tile (window_id, size)
{
  this.window_id = window_id;
  this.size = size;
};

function Desktop ()
{
  this.tiles = [];
  this.ntiles = function () {return this.tiles.length;};
  this.size = function ()
  {
    var sum = 0;
    for (i = 0; i < this.ntiles(); i++) {sum += this.tiles[i].size;};
    return sum;
  };

  this.addTile = function (tile)
  {
    if (this.size() === 1) {return -1;};
    this.tiles.push(tile);
    return 0;
  };
};

function Layer ()
{
  this.desktops = [];
  this.ndesktops =  function () {return this.desktops.length;};

  this.addDesktop = function (desktop)
  {
    this.desktops.push(desktop);
    return 0;
  };

  this.availableDesktopSize = function (size)
  {
    for (i = 0; i < this.ndesktops(); i++)
    {
      print(this.desktops[i].size());
      print('hi');
      print(this.desktops[i].size());
      print('hihi');
      var space = 1.0 - this.desktops[i].size();
      print('hihihi');
      print(space);
      print(size);
      if (space >= size) {return i;};
    };
    return -1;
  };
};

var layer = new Layer();

var desktop1 = new Desktop();
var desktop2 = new Desktop();

var tile = new Tile(100, 0.5);

desktop1.addTile(tile);
desktop1.addTile(tile);
desktop2.addTile(tile);

layer.addDesktop(desktop1);
layer.addDesktop(desktop2);

print(layer.availableDesktopSize(0.51));
print(layer.availableDesktopSize(0.49));

我正在嘗試為Layer類創建一個方法，該方法查找第一個具有足夠空間的桌面。 在嘗試實現此目標時，在嘗試代碼時，我觀察到由於某種原因，當我調用desktop.size（）屬性時，我第一次獲得了正確的值，但是當我第二次調用腳本時，它就死了。 這是輸出

1
hi
TypeError: Result of expression 'this.desktops[i]' [undefined] is not an object.

因此，它可以很好地打印出第一張紙，但是為什么又不能再執行完全相同的功能呢？

（如果您有任何其他建議來改進我的代碼，那將非常有幫助）

Answer 1

問題是您在多個循環中使用了全局i變量。

您可以從這樣的循環中調用方法，該方法具有自己的循環，該循環為相同的i變量提供不同的值。 因此，當您從該電話回來時， 我不再像以前一樣。

解決方案：將變量聲明為局部變量。

for (let i = 0; // ...etc
//   ^^^

Answer 2

使用var聲明您的迭代器變量i以將其綁定到作用域。 現在，您正在使用引起問題的全局作用域i 。

但是，在現代瀏覽器中， let會更好，因為這會將變量綁定到塊作用域。 當前的{}阻止該變量的值在該塊之外使用。

 function Tile (window_id, size) { this.window_id = window_id; this.size = size; }; function Desktop () { this.tiles = []; this.ntiles = function () {return this.tiles.length;}; this.size = function () { var sum = 0; for (var i = 0; i < this.ntiles(); i++) {sum += this.tiles[i].size;}; //var i binds i to this function scope. return sum; }; this.addTile = function (tile) { if (this.size() === 1) {return -1;}; this.tiles.push(tile); return 0; }; }; function Layer () { this.desktops = []; this.ndesktops = function () {return this.desktops.length;}; this.addDesktop = function (desktop) { this.desktops.push(desktop); return 0; }; this.availableDesktopSize = function (size) { for (var i = 0; i < this.ndesktops(); i++) //var i binds i to this function scope. { console.log(this.desktops[i].size()); console.log('hi'); console.log(this.desktops[i].size()); console.log('hihi'); var space = 1.0 - this.desktops[i].size(); console.log('hihihi'); console.log(space); console.log(size); if (space >= size) {return i;}; }; return -1; }; }; var layer = new Layer(); var desktop1 = new Desktop(); var desktop2 = new Desktop(); var tile = new Tile(100, 0.5); desktop1.addTile(tile); desktop1.addTile(tile); desktop2.addTile(tile); layer.addDesktop(desktop1); layer.addDesktop(desktop2); console.log(layer.availableDesktopSize(0.51)); console.log(layer.availableDesktopSize(0.49)); 

Answer 3

我不是很積極，但這似乎是i在for循環中分配的方式。 在這段代碼中

  print(this.desktops[i].size());
  print('hi');
  print(this.desktops[i].size());

i是0但是在下面的行中將其設置為2

    for (i = 0; i < this.ntiles(); i++) {sum += this.tiles[i].size;};

 function Tile (window_id, size) { this.window_id = window_id; this.size = size; }; function Desktop () { this.tiles = []; this.ntiles = function () {return this.tiles.length;}; this.size = function () { var sum = 0; for (i = 0; i < this.ntiles(); i++) {sum += this.tiles[i].size;}; return sum; }; this.addTile = function (tile) { if (this.size() === 1) {return -1;}; this.tiles.push(tile); return 0; }; }; function Layer () { this.desktops = []; this.ndesktops = function () {return this.desktops.length;}; this.addDesktop = function (desktop) { this.desktops.push(desktop); return 0; }; this.availableDesktopSize = function (size) { for (i = 0; i < this.ndesktops(); i++) { console.log(this.desktops[i].size()); console.log(i) print('hi'); print(this.desktops[i].size()); print('hihi'); var space = 1.0 - this.desktops[i].size(); print('hihihi'); print(space); print(size); if (space >= size) {return i;}; }; return -1; }; }; var layer = new Layer(); var desktop1 = new Desktop(); var desktop2 = new Desktop(); var tile = new Tile(100, 0.5); desktop1.addTile(tile); desktop1.addTile(tile); desktop2.addTile(tile); layer.addDesktop(desktop1); layer.addDesktop(desktop2); console.log(layer.availableDesktopSize(0.51)); console.log(layer.availableDesktopSize(0.49));