当我从 setTimeout 添加 class 时出现“未捕获的 TypeError：非法调用”

Question

the following code gives me a Uncaught TypeError: Illegal invocation :

document.querySelector("h1").addEventListener('click', function(evt) {
  setTimeout(this.classList.add, 2000, "bold-h1");
});

But what's wrong with it? Wouldn't that be the same as if I would write

document.querySelector("h1").addEventListener('click', function(evt) {
  setTimeout(() => { this.classList.add("bold-h1"); }, 2000);
});

? (the latter works by the way)

Answer 1

Functions invoked by setTimeout are executed as global code. The add method is expected to be called on a classList object (ie its this will be a classList object), but in the case of global code its this will be the global object or undefined in strict mode.

The global object doesn't have a classList property so this.classList returns null , and calling any method (or even attempting to access any property) of null throws an error.

The reason that the second case works is that the function passed as the listener wraps the arrow function. An arrow function's this is bound to the this of its enclosing execution context, so the arrow function's this is the this of the listener, which is the element the listener is on. So now when the anonymous function is called by setTimeout , its this is the element and this.classList.add(...) works.