Maison > Questions et réponses > le corps du texte
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
迷茫2017-06-26 10:52:10
foo
函数里面的 this
还是 {id:23}
但是到了 setTimeout
接受的回掉里面, this
就变为了 window
所以就输出了全局的 0,第二个因为箭头函数,this
与 foo2
的 this
contraignant, donc 2
typecho2017-06-26 10:52:10
Le 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).
代言2017-06-26 10:52:10
1. Le this de la fonction foo est la fenêtre, et le this de la fonction foo2 est l'objet {id : 2}.
巴扎黑2017-06-26 10:52:10
É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 :
function foo() {
var _this = this;
setTimeout(function (){
console.log('id1:', _this.id);
}, 100);
}
var id = 0;
foo.call({id:23});
曾经蜡笔没有小新2017-06-26 10:52:10
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é.