为什么全局变量值显示为未定义？

Question

const mode = "portfolio";

document.addEventListener('keydown',(event) => {
  console.log(event.key);
  if(event.key === 'ArrowUp' || event.key === 'ArrowDown'){
    modeToggle();
  }
})

const modeToggle = function() {
  console.log(`mode toggle called, current mode is ${this.mode}`);
  if(this.mode == "portfolio") {
    this.mode ="blog";
  } else if(this.mode == "blog"){
    this.mode ="portfolio";
  }
  console.log(this.mode);
}

this.mode 在控制台日志中显示为 'undefined'。

你能帮我理解为什么 this.mode 变量的值是未定义的吗？谢谢:)

P.S。 - 关于 stackflow 的第一个问题：P

Answer 1

因为 this 在事件处理程序中，它引用触发事件的对象，在本例中通常是 document。但是，因为您使用了 Arrow Function as the callback, this is not actually modified from whatever it was referencing prior to the invocation, which in this case actually was window, however because you used const, your variable got block level scope and didn't bind as a window property as stated in the documentation:

This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables.

要访问全局变量，请不要使用 this 或者，如果您想将其与 window 一起使用，请使用 [= 声明变量19=] 所以你没有得到块级作用域。

此外，如果您希望能够修改变量，请不要使用const（常量）声明它。

// If you want to be able to modify a variable value,
// you can't have it declared as a constant. And, by
// declaring with const or let, you create block level
// scope and don't actually create a new property on
// the Global object, but with var, you do.
var mode = "portfolio";

document.addEventListener('keydown',(event) => {
  // Within an event handler, "this" is a reference to the
  // object that triggered the event. But, within an Arrow
  // function, this is unchanged from whatever it had been
  // prior to the invocation of the arrow function. In this
  // case, the window, but if your Global is declared with
  // const or let, you'll get block scope and won't create
  // a true global property. With "var" (as I've shown above)
  // you will:
  console.log(this.mode, event.key);
  if(event.key === 'ArrowUp' || event.key === 'ArrowDown'){
    modeToggle();
  }
})

const modeToggle = function() {
  console.log(`mode toggle called, current mode is ${mode}`);
  if(mode == "portfolio") {
    mode ="blog";
  } else if(mode == "blog"){
    mode ="portfolio";
  }
  console.log(mode);
}

为什么全局变量值显示为未定义？

Why does the global variable value show up as undefined?

html

javascript

dom

undefined

dom-events