このコードブロックはどのようにJavaScriptで動作しますか？

Question

はのは例を見てみましょう：

最初：

var user = { 
    firstName: "John", 
    sayHi: function() { 
    alert(this.firstName); 
    } 
}; 

setTimeout(function() { 
    user.sayHi(); // John 
}, 1000); 

秒：

var user = { 
    firstName: "John", 
    sayHi: function() { 
    alert(this.firstName); 
    } 
}; 

setTimeout(user.sayHi, 1000);// undefined 

なぜ第二の例では未定義？そしてそれはどのように機能しますか？

Answer 1

関数参照をsetTimeout関数に渡すと、渡された関数参照はwindowのスコープ内で実行されます。だからwindow.firstNameはundefinedになります。あなたはwindowのようなオブジェクトを持っていません。

var user = { 
    firstName: "John", 
    sayHi: function() { 
    alert(this.firstName); 
    } 
}; 

setTimeout(user.sayHi.bind(user), 1000); 

上記のコードでわかるように、スコープを関数参照に明示的にバインドする必要があります。また、以下のような無名関数を使用する伝統的な方法を使用することもできます。

setTimeout(function(){ user.sayHi(); }, 1000);