无法在 Javascript 对象中获取数组/对象的长度答案

【问题标题】：Can't get length of array/object in an Object of Javascript无法在 Javascript 对象中获取数组/对象的长度
【发布时间】：2018-07-16 06:12:23
【问题描述】：

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 返回的数组的长度。如果我把它放在对象范围之外，它就可以工作。但在对象范围内，它不会。现在，我想知道一个原因。我在其他站点（例如Mozilla）代码编辑器上进行了测试，但它只返回相同的结果。

【问题讨论】：

因为this 不指向box 对象。 this 指向窗口对象

标签： javascript arrays object variable-length-array

【解决方案1】：

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

【讨论】：

老兄，它返回一个 HTML 集合，它是一个对象，所以他所做的并没有错，只是他在对象初始化中调用了this
@Roljhon 你在控制台中测试过document.getElementsByClassName('box') 吗？它返回 null。
老兄，它没有:) 如果你从上面的小提琴中测试它，你可能是在 iframe 之外执行代码。

【解决方案2】：

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

你可以做的是创建一个函数并返回它。

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

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

还请注意，您需要在 DOM 准备好时运行您的方法。

【讨论】：

这行不通。再次this 不会指向 box 对象，它可能是 undefined 或 Window 对象，如果你尝试过，你就会知道 Edited: Sweko 是对的
是的，你需要一个常规函数，因为胖箭头没有定义自己的this
@SWeko 忘记了 :) 太棒了！

【解决方案3】：

this 在 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 行执行之前的任何内容都绑定。

【讨论】：