javascript - 无法获取Javascript对象中数组/对象的长度

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

Answer 1

javascript 中的

this 仅具有函数作用域，即它指向当前正在执行的函数所在的对象。如果您没有这样的对象，即您位于顶层，则浏览器中的 this 通常指向 window 对象。

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

这样的代码可以工作:

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

console.log(person.getName());

因为我仅在定义 getName 函数后调用它，并且在该函数中，this 绑定(bind)到 person 。但是，这段代码:

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

console.log(person.fullName);

不起作用，因为这与 const person 行执行之前的任何内容绑定(bind)在一起。