Javascript Objekt Literal: Wert Initialisierung?

Question

Ich verwendete Objektliteral, um ein Objekt mit Methoden zu erstellen.
Hier ein einfaches Beispiel.

var SizeManager = { 
    width : 800, 
    height : 600, 
    ratio : this.width/this.height, 
    resize : function (newWidth) { 
     width = newWidth; 
     height = newWidth/ratio; 
    } 
} 

Mein Problem ist, dass SizeManager.ratio "NaN" zurückgibt. Ich bin mir ziemlich sicher, dass es sich um ein Initialisierungsproblem handelt.
Gibt es eine Möglichkeit, einen korrekten Verhältniswert zu erhalten?
Gibt es eine Möglichkeit, einem Objektliteral einen Costructor oder Initializer zuzuweisen?
Definiert ein Konstruktor objcet der einzige Weg?

EDIT: natürlich SizeManager ist idealerweise ein Singleton (nur ein Objekt), so habe ich Objektliteral verwendet.

Answer 1

Ja, es ist ein Initialisierungsproblem. this bezieht sich nicht auf Ihr SizeManager Objekt an dem Punkt, an dem Sie es verwenden. (Objektinitialisierer ändern den Wert this nicht.) this wird durch den Aufruf einer Funktion festgelegt und hat während des Funktionsaufrufs denselben Wert. Sie sind nicht Aufruf jede Funktion dort, so this hat was auch immer es hatte vor dem Anfang dieses Codes.

(Ich habe etwas über ratio von Ihrem spezifischen Beispiel am Ende dieses darauf hingewiesen, aber die ersten durch ein paar Optionen für den allgemeinen Fall, dass Sie heben gehen lassen.)

Daniel's given you eine gute Lenk auf machen ratio eine Funktion, außer er scheint nicht erkannt zu haben, dass Sie die Breite variieren möchten. Alternativ kann, wenn width und height nicht ändern wird, berechnen sie nur danach:

var SizeManager = { 
    width : 800, 
    height : 600, 
    resize : function (newWidth) { 
     this.width = newWidth; 
     this.height = newWidth/this.ratio; 
    } 
}; 
SizeManager.ratio = SizeManager.width/SizeManager.height; 

(Randbemerkung: Ich this. den Eigenschaften hinzugefügt haben sind Sie in resize Referenzierung Sie wurden von Ihrer ursprünglichen fehlt. ., aber sie sind erforderlich Ohne sie es zu tun Sie mit dem horror of implicit globals, die eine schlechte Sache ^(tm) ist)

natürlich können Sie all das in einer Fabrik einkapseln könnte.

function makeSizeManager(width, height) { 
    return { 
     width : width, 
     height : height, 
     ratio : width/height, 
     resize : function (newWidth) { 
      this.width = newWidth; 
      this.height = newWidth/this.ratio; 
     } 
    }; 
} 
var SizeManager = makeSizeManager(800, 600); 

... aber dann könnte man genauso gut ihm eine tatsächliche Konstruktor Funktion, so dass Sie viele doppelte nicht erstellen (aber identisch) resize Funktionen:

function SizeManager(width, height) { 
    this.width = width; 
    this.height = height; 
    this.ratio = width/height; 
} 
SizeManager.prototype.resize = function (newWidth) { 
    this.width = newWidth; 
    this.height = newWidth/this.ratio; 
}; 
var aSizeManagerInstance = new SizeManager(800, 600); 

(Hinweis geändert ich die etwas Namen auf das letzte.

)

Und eine letzte letzte Anmerkung: In Ihrem speziellen Beispiel, brauchen Sie nicht wirklich ratio überhaupt zu speichern, können Sie dies tun:

var SizeManager = { 
    width : 800, 
    height : 600, 
    resize : function (newWidth) { 
     var ratio = this.width/this.height; 
     this.width = newWidth; 
     this.height = newWidth/ratio; 
    } 
}; 

Aber das ist nur für dieses spezielle Beispiel, daher die obige Diskussion, um über den allgemeinen Fall zu sprechen.

Answer 2

Ihre ratio Eigenschaft sollte eigentlich eine Methode sein, wenn Sie es basierend auf Änderungen width ändern möchten, und height:

var SizeManager = { 
    width : 800, 
    height : 600, 
    ratio : function() { 
     return this.width/this.height; 
    }, 
    resize : function (newWidth) { 
     width = newWidth; 
     height = newWidth/ratio; 
    } 
} 

Auch Sie wahrscheinlich this.width beziehen möchten und this.height statt width und height in die resize Methode.

Answer 3

In einem Objektliteral bezieht sich this nur auf das Objektliteral selbst, wenn es sich innerhalb einer Funktion befindet. Sie können so etwas anstelle eines Objektliterals versuchen; this bezieht sich auf das Objekt, das Sie sowohl innerhalb als auch außerhalb von Funktionen erstellen.

var SizeManager = new function(){ 
    this.width = 800; 
    this.height = 600; 
    this.ratio = this.width/this.height; 
    this.resize = function (newWidth) { 
     this.width = newWidth; 
     this.height = newWidth/this.ratio; 
    } 
} 

Das wird für ein Singleton-Muster funktionieren. Wenn Sie mehr als einen SizeManager benötigen, stellen Sie eine Konstruktorfunktion anstelle eines Objekts ein.

function SizeManager (w, h){ 
    w && (this.width=w); 
    h && (this.height=h); 
    this.ratio = this.width/this.height; 
} 
SizeManager.prototype={ 
    width: 800, 
    height: 600, 
    resize: function (newWidth) { 
    this.width = newWidth; 
    this.height = newWidth/this.ratio; 
    } 
}