无法在 Javascript 的对象中获取 array/object 的长度

Question

box = {
  curBox: 0,
  boxes: document.getElementsByClassName('box'),
  size: this.boxes.length, //this one won't work
  orSize: Object.keys(this.boxes).length, //as well as this one
  preBox: function() {
    curBox -= 1
  },
  nexBox: function() {
    curBox += 1
  }
}

console.log(box.boxes.length); //This one works well!!!

<div class='active box BG_blue'>
  <meta name='title' content='Overview' /> ...
</div>

<div class='inactive box BG_orange'>
  <meta name='title' content='Career' /> ...
</div>

<div class='inactive box BG_red'>
  <meta name='title' content='Skills' /> ...
</div>

<div class='inactive box BG_awesome'>
  <meta name='title' content='Hobbies' /> ...
</div>

我试图从 getElementsByClassName 中获取数组 return 的长度。如果我把它放在对象范围之外，它就会起作用。但在对象范围内，它不会。现在，我想知道一个原因。我已经在其他站点（例如 Mozilla）代码编辑器上进行了测试，但它只有 return 相同的结果。

Answer 1

document.getElementsByClassName('box') 不正确，在这种情况下 return 为空。该函数 returns 元素具有第一个参数中指定的所有类作为 space 分隔的字符串。您可以使用 document.querySelectorAll('.box').

Answer 2

主要的原因是您仍在初始化您的 Box 对象，因此您无法访问它。换句话说，你的对象在你使用它的时候还没有完全形成。

您可以做的是创建一个函数并return它。

boxes: function() {
  return function() { return this.boxes.length; },
}

我创建了一个经过改进的 jsfiddle。 https://jsfiddle.net/jz1thu26/.

另请注意，当 DOM 准备就绪时，您需要运行您的方法。

Answer 3

this in javascript 只有函数作用域，即指向当前执行函数所在的对象。如果你没有这样的对象，即你在顶层，那么this，在浏览器中，一般指向window对象。

因此，在构造您的对象时，this 实际上不是您的对象，而是其他东西。

这样的代码可以工作：

const person = {
  name: "Wekoslav",
  surname: "Stefanovski",
  getName: function(){
    return this.name + " " + this.surname;
  }
}

console.log(person.getName());

因为我只是在定义 getName 函数之后才调用它，并且在该函数中，this 绑定到 person。但是，这段代码：

const person = {
  name: "Wekoslav",
  surname: "Stefanovski",
  fullName: this.name + " " + this.surname;
}

console.log(person.fullName);

不会工作，因为它绑定到 const person 行执行之前的任何内容。

无法在 Javascript 的对象中获取 array/object 的长度

Can't get length of array/object in an Object of Javascript

javascript

arrays

object

variable-length-array