setTimeout 中的箭头函数不会将窗口设置为这样

Question

I have some method of an object assigned by a decorator (that's where the function f, and ms are taken from).

  function() {
        setTimeout(() => f.apply(this, arguments), ms); 
      };

'this' refers here to the object. But 'this' of setTimeout is window, not that object. If 'this' of an arrow function is taken lexically, then how come it's not taken from setTimeout? After all, in the following code:

let user = {
  firstName: "Ilya",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Ilya

'this' is taken from the function above. So if that function is setTimeout in the first situation why aren't both situations the same? I thought it might have had something to do with the function being passed as argument in one case, and in the other one as a local variable, but wouldn't this come down to the same in lexical environments?

Why is there a difference?

Besides, to test this out:

let obj = {name : "Jeff"};
let obj2 = {name : "Bart", fun2 : function(fun){fun();}};

obj.name2 = obj2.fun2(() => alert(this.name));

but now I don't get "Bart" alerted, but an empty string. When I replace "name" with length, I just get 0, the 'this' refers to the window.

Why doesn't this work as intended?

Answer 1

If 'this' of an arrow function is taken lexically, then how come it's not taken from setTimeout?

Lexical means that the scope is taken from where the function is declared, not where it is passed to.

Answer 2

Inside a function, the value of this depends on how the function is called.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

In your function you have passed the window object to the setTimeout.

If you alter you function and pass just arguments you will get the object:

function f() {
  console.log(this);
};

function a (){
  setTimeout(() => f.apply([1]), 1000); // here this = [1]
}

a();  // Array [1]