Comprendre « ceci » dans les objets et fonctions JavaScript.

JS ce mot-clé dans la portée de l'objet

En JavaScript, comprendre le quoi, le comment et le où du mot-clé this peut faire la différence entre écrire du code qui fonctionne réellement et s'arracher les cheveux pendant que vous codez.

Le mot-clé ce

En Javascript, il s'agit d'un mot-clé (un mot réservé), c'est-à-dire qu'il ne peut pas être utilisé comme nom de variable.

Dans le code JavaScript, ceci est utilisé pour représenter une portée. En termes simples, une portée est un bloc de code qui contient une ou plusieurs lignes de code. Cela peut signifier l'intégralité du code (portée globale) ou une ou plusieurs lignes de code entre accolades {...}

    var a = 1;

    //varaible "a" can be accessed any where within the global scope

    function sayHello(){
        var message = "Hello";
        console.log(message);
    };

    //the variable "message" is not accessible in the global scope
    //varaible "a" can be accessed any where within the global scope

ceci en action

    var a = 1;

    console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.

    function sayHello(){
        var message = "Hello";
        console.log(this.message);
    };

    sayHello(); // undefined

Vous vous demandez peut-être pourquoi la fonction sayHello() dans l'extrait ci-dessus a renvoyé undéfini, étant donné que this fait référence à la portée de la fonction sayHello(). Avant de vous précipiter pour dire que c'est une autre bizarrerie de JavaScript. Plongeons-y.

    var a = 1;

    console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.

    function sayHello(){
        var message = "Hello";
        console.log(this.message);
    };

    sayHello(); // undefined

La fonction sayHello() est exécutée dans la portée globale, ce qui signifie que l'exécution de sayHello() résout cela dans la portée globale (l'objet window ; plus comme dire window.message). Il n'y a pas de variable nommée message dans la portée globale, elle renvoie donc undefined (vous pouvez essayer d'ajouter une variable nommée message à la portée globale et voir ce qui se passe.). Une solution probable est présentée ci-dessous :

    var person = {
        message: "Hello",
        sayHello: function(){
            console.log(this.message);
        }
    };

    person.sayHello(); // Hello

Ici, la fonction sayHello() est une propriété dans l'objet personne, l'exécution de la fonction résout cela dans la portée de l'objet personne, plutôt que dans l'objet fenêtre. message est une variable (une propriété d'objet) dans l'objet personne, il renvoie donc la valeur qui lui est assignée.

Bien que des cas comme celui ci-dessus ne soient peut-être pas nécessaires dans des scénarios du monde réel, il ne s'agit que d'une explication de base de la façon dont cela fonctionne sous le capot.

Examinons un autre exemple :

    const obj = {
        a: 1,
        b: function() {
            return this.a;
        },
        c: () => {
            return this.a;
        }
    };

    // Output 1: 1
    console.log(obj.b());  

    // Output 2: undefined
    console.log(obj.c());  

    const test = obj.b;

    // Output 3: undefined
    console.log(test());    

    const testArrow = obj.c;

    // Output 4: undefined
    console.log(testArrow());

Sortie 1

obj.b() exécute la fonction et ceci se résout dans la portée de l'objet obj et renvoie la valeur de a

Sortie 2

Les fonctions fléchées résolvent cela à la portée globale même lorsqu'elles sont déclarées dans un objet. Ici, cela se résout dans la portée globale (fenêtre), la variable a n'existe pas dans la portée globale, donc elle renvoie undéfini.

Sortie 3

obj.b renvoie une fonction de l'objet obj (il ne l'exécute pas ; les parenthèses dans les appels de fonction signifient l'exécution), la fonction renvoyée est affectée à la variable de test et la fonction est exécutée dans la portée globale (fenêtre) , la variable a n'existe pas dans la portée globale, elle renvoie donc undéfini.

Sortie 4

obj.c renvoie une fonction de l'objet obj (il ne l'exécute pas ; les parenthèses dans les appels de fonction signifient l'exécution), la fonction renvoyée est affectée à la variable testArrow et la fonction est exécutée dans la portée globale (fenêtre) , les fonctions fléchées résolvent normalement cela dans la portée globale, la variable a n'existe pas dans la portée globale, elle renvoie donc undéfini.

Voilà, les amis. J'espère que vous avez compris les bases de son fonctionnement en JavaScript. Plus besoin de l'utiliser dans les fonctions fléchées, n'est-ce pas ? Nous ne devrions pas non plus passer des nuits blanches en ce qui concerne son utilisation dans les oscilloscopes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!