hmm: this JavaScript

Hallo Leute,

könnt ihr mir sagen warum im folgenden Code "this.maxlable" undefinde ist? Und wie ich machen kann, dass sie nicht mehr undefind ist?

function Grafik( jsonData, width, height) {
	
	this.maxLabel = 150;
	


	this.init = function() {
				
		console.log( this.maxLabel);				
	}
}
  1. Ich weiß ja nicht genau, was Du machst. Aber:

    function Grafik( jsonData, width, height) {
            this.maxLabel = 150;
            this.init = function() {
                    console.log( this.maxLabel);
            }
    }
    grafik=new Grafik;
    grafik.init();
    

    schreibt mir bei einem Test mit node brav "150" in die Konsole:

    ~> node test.js
    150
    
  2. Hallo

    Könnt ihr mir sagen warum im folgenden Code "this.maxlable" undefinde ist? Und wie ich machen kann, dass sie nicht mehr undefind ist?

    function Grafik( jsonData, width, height) {
    	
    	this.maxLabel = 150;
    	
    
    
    	this.init = function() {
    				
    		console.log( this.maxLabel);				
    	}
    }
    

    Der Ausdruck this.maxLabel ergibt nicht undefined. Jedenfalls dann nicht, wenn du die Methode init auch tatsächlich als Methode auf dem Instanzobjekt aufrufst, auf dem du deine Eigenschaft maxLabel definiert hast.

    function Constructor (value) {
      'use strict';
      this.key = value;
      this.print = function ( ) {
        console.log(this.key);
      };
    }
    
    const instance = new Constructor('value');
    
    // method call
    instance.print( ); // value
    

    Gewöhnliche Funktionen wie du sie hier verwendest binden in jedem Fall einen eigenen Kontext, wobei der Wert der Kontextvariable this erst beim Aufruf der Funktion ermittelt wird, und zwar abhängig davon, auf welche Weise die Funktion aufgerufen wird.

    Bei einem Methodenaufruf, also einem Elementausdruck wie object.method plus Call-Operator, wird die Funktion automatisch im Kontext des Objektes aufgerufen, zu dem die Referenz vor dem Punkt aufgelöst wurde.

    Wird die Funktion hingegen nicht als Methode aufgerufen sondern über einen normalen Funktionsaufruf, dann verweist this auf den Kontext der lexikalischen Umgebung in der die Funktion definiert wurde, was je nach Ausführungsmodus entweder das globale Objekt oder undefined ist.

    Viele Grüße,

    Orlok

  3. Und hier der Rest:

    function Grafik( jsonData, width, height ) {
            this.maxLabel = 150;
            this.init = function() {
                    console.log( this.maxLabel + ' | ' + 'width='+ width + ' | height=' + height );
                    this.hash = JSON.parse(jsonData);
                    console.log( this.hash['foo'] );
            }
            this.init();
    }
    grafik = new Grafik('{"foo":"bar"}', 100, 200);
    console.log(grafik.hash.foo);
    

    Ausgaben:

    node test.js
    150 | width=100 | height=200
    bar
    bar
    
  4. function Grafik( jsonData, width, height) {
    	this.maxLabel = 150;
    	this.init = function() {
    		console.log( this.maxLabel);				
    	}
    }
    

    Es wurde ja bereits gesagt, dass der Fehler auftritt, wenn beim Aufruf von init this nicht so aufgelöst wird, wie man es erwartet. Das ist ein generelles Problem mit dem dynamischen Geltungsbereich. Mit dem statischen/lexikalischen Geltungsbereich kann man dieses und viele andere Probleme elegant vermeiden:

    function Grafik( jsonData, width, height) {
    	var maxLabel = 150;
    	return {
            	init : function() {
    			console.log(maxLabel);
    		}
    	}
    }