recherche
Maisoninterface Webjs tutorielComprendre « ceci » dans les objets et fonctions JavaScript.

Understanding

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Moteurs JavaScript: comparaison des implémentationsMoteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AM

Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.

Au-delà du navigateur: Javascript dans le monde réelAu-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AM

Les applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.

Construire une application SaaS multi-locataire avec next.js (intégration backend)Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AM

J'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Cet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles

JavaScript: Explorer la polyvalence d'un langage WebJavaScript: Explorer la polyvalence d'un langage WebApr 11, 2025 am 12:01 AM

JavaScript est le langage central du développement Web moderne et est largement utilisé pour sa diversité et sa flexibilité. 1) Développement frontal: construire des pages Web dynamiques et des applications à une seule page via les opérations DOM et les cadres modernes (tels que React, Vue.js, Angular). 2) Développement côté serveur: Node.js utilise un modèle d'E / S non bloquant pour gérer une concurrence élevée et des applications en temps réel. 3) Développement des applications mobiles et de bureau: le développement de la plate-forme multiplateuse est réalisé par réact noral et électron pour améliorer l'efficacité du développement.

L'évolution de JavaScript: tendances actuelles et perspectives d'avenirL'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

Démystifier javascript: ce qu'il fait et pourquoi c'est importantDémystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Python ou JavaScript est-il meilleur?Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AM

Python est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),