Méthode d'objet utilisant entre la portée lexicale ou cette liaison?

Le problème n'a rien à voir avec cette ou portée. :-) Vous voyez les undefined car la method ne renvoie rien, donc l'appelant donne la valeur undefined , ce que vous journalisation via console.log . Pour qu'il renvoie la valeur de count , vous ajoutez un return:

for (var i = 0; i<10; i++) {
    console.log(obj.method) // invoked as a property
}

qui renvoie la valeur de this.count telle qu'elle était avant l'incrément (ce qui semble être ce que vous attendez de votre sortie attendue).

Exemple en direct:

.as-console-wrapper {
  max-height: 100% !important;
}

var obj = {
    count: 0,
    method: function() {
        console.log("in method: " + this.count)
        return this.count++;
    },
    timeOutMethod: function() { // I understand here we explicitly bind this, no problem here
        setTimeout(function() {
            console.log(this.count++)
        }.bind(this), 100)
    }
}

// here is where I have issue, when the method is invoked as a function
for (var i = 0; i<10; i++) {
    console.log(obj.method()) // invoked as a function
}

Séparément, sur ceci:

method: function() {
    console.log(this.count)
    return this.count++;
//  ^^^^^^
},

qui n'invoque pas méthode du tout, il obtient juste sa valeur (une référence à une fonction) puis enregistre cela (vous verrez une représentation de la fonction dans la console).

Il est contraignant .

La portée est le concept des variables accessibles et des variables que le langage vous cache. En langage machine, toutes les adresses mémoire sont lisibles et inscriptibles, donc en langage machine et dans certains langages d'assemblage, le concept de portée n'existe pas (toutes les variables sont fondamentalement globales). Les langages ultérieurs ont introduit le concept de variables globales vs locales avec l'introduction de fonctions. Ce concept a ensuite évolué vers des fermetures - la possibilité de créer plusieurs instances de champs d'application .

La liaison est le concept de la propriété / attribut appartenant à quel objet. Dans les langages comme Java et C ++ qui implémentent la liaison précoce, le concept de liaison régit simplement la manière dont les méthodes accèdent aux propriétés (généralement cela permet au langage de ne pas avoir besoin d'un mot-clé "this"). Les langages de liaison tardive ont des règles légèrement plus compliquées car la liaison est déterminée au moment de l'exécution au lieu de la compilation. Javascript est non seulement une liaison tardive, mais aussi dynamique - permettant aux programmeurs de changer quel objet cela indique en utilisant des choses comme Function.prototype.call () . Et assigner des méthodes d'un objet à un autre objet au moment de l'exécution (par exemple b.foo = a.foo )

TL; DR Le mécanisme qui lie la propriété count à la valeur this est liaison implicite

D'abord Si je suis arrivé à une fausse conclusion dans mon explication, voudriez-vous fournir ce que vous êtes d'accord ou pas et partager comment devrais-je penser à ce problème? Je cherche à m'améliorer, merci!

Exemples

Voici des exemples de code qui ont été sources de ma confusion. Mon problème est né de la fusion des conventions sur la façon dont cette -binding fonctionne dans différents styles de code. J'ai mélangé les concepts suivants:

1. Comment ce mot-clé fonctionne dans les fonctions fléchées (c.-à-d. portée lexicale)

   function foo(num) {
       console.log( "foo: " + num );
   
       // keep track of how many times `foo` is called
       this.count++;
   }
   
   foo.count = 0;
   
   var i;
   
   for (i=0; i<10; i++) {
       if (i > 5) {
           foo( i );
       }
   }
   // foo: 6
   // foo: 7
   // foo: 8
   // foo: 9
   
   // how many times was `foo` called?
   console.log( foo.count ); // 0 -- not what we expected
   

2. Au lieu de comprendre comment cela fonctionne réellement, la portée lexicale est utilisée comme solution de contournement. Ici, data.count est incrémenté

   function foo() {
       return data.count++; // the obj property data.count is accessed via global scope
   }
   
   var data = {
       count: 0,
   }
   
   for (var i = 0; i<10; i++) {
       foo()
   }
   
   console.log(data.count)
   

3. Et enfin, un autre malentendu peut survenir en prenant une interprétation trop littérale de la liaison this . Je cite que l'extrait provient du livre de Getify

   function wait() {
       setTimeout(() => {
           console.log(this) // lexically bound
       }, 100);
   }
   
   wait();
   
   function foo() {
       // console.log(this) - will output {a: 2}
       return (a) => {
           console.log(this.a) // 'this' value is adopted from foo's lexical scope
       }
   }
   
   var obj = {
       a: 2
   }
   
   var obj2 = {
       a: 3
   }
   
   // foo is 'this'-bound to obj1
   // bar, a reference to the returned arrow-function will also be 'this'-bound to obj1
   // the arrow function binding cannot be overridden
   var bar = foo.call(obj) 
   bar.call(obj2)
   

À part: merci à @TJ Crowder et @slebetman pour leur aide dans la clarification d'autres malentendus sur la portée et -binding