JavaScript var und this, {} und function

Dieses Mal bringe ich Ihnen JavaScripts var und this, {} und function, Verwenden Sie JavaScripts var und this, {} und function Notizen Was sind die folgenden?

JavaScript var wird zum Definieren einer Variablen verwendet und wird häufig zum Definieren oder Aufrufen einer Eigenschaft oder Methode verwendet. Aber im globalen Bereich sind this und var define variables gleichwertig.

Fenster

 console.log('window:', name); var name = 'stone'; this.name = 'niqiu';
 console.log('var:',name);
 console.log('this:',this.name);

Fensterobjekt hat ein Namensattribut, der Anfangswert ist leer, aber der erste Konsole So erhalten Sie den Wert, wenn . Es wurde festgestellt, dass dieses Fenster den letzten Wert aufzeichnet. Öffnen Sie die Seite erneut und führen Sie einfach console.log('window:', name); aus und die Ausgabe ist leer.

  console.log('window:', name);  var name = 'stone';

Zweimal aktualisieren und dann Stein ausgeben Das Fensterobjekt wird also beim Aktualisieren nicht neu erstellt. window ist ein {}-Objekt. Es gibt keinen Konstruktor und kann nicht neu sein.

Funktion und {}

Innerhalb der Funktion definiert var lokale Variablen und diese definiert Attribute. Diese beiden sind nicht abgedeckt. Neu erstellte Objekte können jedoch keine lokalen Variablen erhalten.

     var Fool = function () {            var name = 'stone';            var nikename = 'stoneniqiu';            this.name = 'niqiu';            this.getName = function () {
                console.log('var', name);
                console.log('this', this.name);
            };            this.getNickname = function() {                return nikename;
            };
        };

    console.log(f.name); //niqiu
    console.log(f.nikename);//undefined
    console.log(f.getNickname());//stoneniqiu

Aber wenn Sie {} verwenden, um ein Objekt zu definieren, sind alle internen Variablen Eigenschaften.

  var block = {
            name: 'stone',
            nickname:'stoneniqiu',
            getName: function () {                // return this.name;//stone
                return name; //'windows name';            },
            getNickname:function() {                return this.nickname;
            },
            printAllName:function() {
                console.log(this.getNickname());
                console.log(this.getName());
            }
        };
       console.log(block.name);//stone
       console.log(block.getName()); //windows name

Wie das Fensterobjekt kann das von {} erstellte Objekt nicht neu sein, da es keinen Konstruktor gibt.

Wenn das Objekt also wiederverwendet wird und relativ groß ist, ist es besser, das Funktionsformular zu verwenden, um private Variablen und öffentliche Eigenschaften oder Methoden zu trennen. Das interne Modul der Funktion kann die Form {} verwenden.

Methoden, die dadurch den Kontext erhalten können, zu dem sie gehören, werden öffentliche Methoden genannt. Die Bindung an das Objekt erfolgt zum Zeitpunkt des Aufrufs. Diese „super“ verzögerte Bindung ermöglicht der Funktion eine hohe Wiederverwendung.

Dies bezieht sich auf das aktuell ausgeführte Objekt, um diese Änderung zu vermeiden. Um dies vorübergehend zu speichern, wird häufig eine Variable verwendet.

var self=this

Magischer Rückruf

Schauen wir uns ein Beispiel an. Die Rückrufmethode ist in den Parametern des Objekts definiert, aber eine Methode, die wir an Fool selbst übergeben haben, wurde tatsächlich ausgeführt.

 var Fool = function (config) {           var parmas = {
               callback: function() {
                   console.log('raw callback');
               }
           };
           parmas = $.extend(parmas, config);           var name = 'stone';           var nikename = 'stoneniqiu';           this.name = 'niqiu';           this.getName = function () {
               console.log('var', name);
               console.log('this', this.name);
           };           this.getNickname = function () {               return nikename;
           };           this.doSomething = function () {
               parmas.callback();
           };
       };       var f = new Fool({callback:function() {
           $("#bt").click(function() {               f.getName()
           });
       }});
       f.doSomething();

wird ordnungsgemäß ausgeführt. Klicken Sie auf die Schaltfläche, um die getName-Methode auszulösen. Wenn Sie jedoch direkt so schreiben, wird ein Fehler gemeldet, was sehr vernünftig ist.

 var f = new Fool({callback:f.getName()});

Ändern Sie es erneut und umschließen Sie es mit der anonymen Funktion, und es kann weiterhin ausgeführt werden.

var f = new Fool({callback:function() {             (function() {
               f.getName();
            })();
       }});
       f.doSomething();

Ich habe es heute herausgefunden. Das ist tatsächlich ein Abschlussproblem, das innerhalb der Funktion ausgeführt wird. Es bindet das externe f, nicht den Moment, in dem die Funktion ist f konstruiert, daher ist es egal, ob f erstellt wird, wenn die anonyme Funktion erstellt wird. Es entspricht dem folgenden klassischen Problem:

var addhandle=function(node){var ifor(i=0;i<node.length;i++){
 node[i].onclick=function(e){
 alert(i);
} 
}
}

Wenn die obige Methode ausgeführt wird, ist i nach dem Ende der Schleife gebunden. Anstatt in diesem Moment durch i zu blättern. Wenn der Code in der obigen Schleife wie folgt geändert wird.

nodes[i].onclick=function(i){ return function(e){
 alert(e)
 }
}(i)

ist die Variable i beim Aufbau der Funktion.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ereignisverwaltung in JavaScript

Detaillierte Erklärung von Promise in jQuery, Angular und Node

Das obige ist der detaillierte Inhalt vonJavaScript var und this, {} und function. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!