foo2() utilise une fonction flèche.
Selon la compréhension de call, foo.call({id:23}) devrait afficher 23, pas 0. Alors, quelqu'un peut-il expliquer cela ?
Le code est le suivant :
<script type="text/javascript">
function foo() {
setTimeout(function (){
console.log('id1:', this.id);
}, 100);
}
function foo2() {
setTimeout(() => {
console.log('id2:', this.id);
}, 100);
}
var id = 0;
foo.call({id:23});
foo2.call({id: 2});
</script>
Résultat de l'exécution :
0
2
foo
函数里面的this
还是{id:23}
但是到了setTimeout
接受的回掉里面,this
就变为了window
所以就输出了全局的 0,第二个因为箭头函数,this
与foo2
的this
contraignant, donc 2Le paramètre de setTimeout de foo2 est une fonction fléchée, et ce à l'intérieur est la portée où la liaison est définie (lorsque foo2 est exécuté, c'est l'objet dans l'appel), plutôt que de pointer vers la portée où se trouve le runtime . Les fonctions de setTimeout ordinaire sont liées à la portée d'exécution (fenêtre).
1. Le this de la fonction foo est la fenêtre, et le this de la fonction foo2 est l'objet {id : 2}.
Évidemment, la première fonction this pointe vers la fenêtre, et la deuxième fonction fléchée pointe vers l'objet actuel, ce qui signifie que celui qui l'appelle pointe vers celui qui l'appelle
La première peut être modifiée pour résoudre le problème :
1. La fonction de rappel dans setTimeout est exécutée 100 ms après l'exécution de foo et la portée d'exécution est window.
2. La fonction flèche permet à cela dans setTimeout d'être lié à la portée où il est défini, plutôt que de pointer vers la portée où il est exécuté.
Le problème de la portée de la fonction flèche