javascript - Un problème avec l'appel js, code très simple, comment interpréter le résultat de sortie?
phpcn_u1582
phpcn_u1582 2017-06-26 10:50:10
0
6
748

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

phpcn_u1582
phpcn_u1582

répondre à tous(6)
迷茫

foo 函数里面的 this 还是 {id:23} 但是到了 setTimeout 接受的回掉里面, this 就变为了 window 所以就输出了全局的 0,第二个因为箭头函数,thisfoo2this contraignant, donc 2

typecho

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).

代言

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 :

    function foo() {
        var _this = this;
        setTimeout(function (){
            console.log('id1:', _this.id);
        }, 100);
    }
    var id = 0;
    foo.call({id:23});
曾经蜡笔没有小新

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal