Verketten der Werte der Eigenschaften eines Objekts gibt NaN (Javascript) zurück

Question

Ich habe ein Objekt mit mehreren Eigenschaften, jede Eigenschaft hat einen Wert, der eine Zeichenfolge ist. Wenn ich versuche, die Werte jeder Eigenschaft zu verketten, wird NaN zurückgegeben.

var urlProps = { 
    searchTerm: "searchSTUFF", 
    baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", 
    tailURL: "&rawcontinue=&callback=?", 
    finalURL: this.baseURL + this.searchTerm + this.tailURL 
} 

console.log(urlProps.finalURL); 
//NaN 

Was mache ich hier falsch machen, oder was ist der richtige Weg, dies zu tun?

Answer 1

An dem Punkt, wo Sie versuchen, hat noch erstellt worden.
Auch this würde das Objekt in keinem Fall darstellen. Sie würden dies in einem Konstruktor oder einer Objektmethode verwenden.
Um das gewünschte Ergebnis zu erhalten, müssen Sie dies tun.

var urlProps = { 
    searchTerm: "searchSTUFF", 
    baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", 
    tailURL: "&rawcontinue=&callback=?", 
    finalURL: this.baseURL + this.searchTerm + this.tailURL 
} 
urlProps.finalURL = urlProps.baseURL + urlProps.searchTerm + urlProps.tailURL; 

Answer 2

Ich würde vorschlagen Funktion

var urlProps = { 
    searchTerm: "searchSTUFF", 
    baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", 
    tailURL: "&rawcontinue=&callback=?", 
    finalURL: function() { return this.baseURL + this.searchTerm + this.tailURL; } 
} 

console.log(urlProps.finalURL()); 
//https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&e…=&titles=%20&generator=search&gsrsearch=searchSTUFF&rawcontinue=&callback=? 

Answer 3

Der JS Motor nicht this.baseUrl oder this.searchTerm oder this.tailUrl finden können, wenn sie versuchen finalUrl zu bauen, weil das Objekt Sie bauen nicht ‚existieren‘ für die Zwecke der Referenz bis Der Motor wird fertiggebaut (}).

Um diese Arbeit zu machen, Sie müssen sicherstellen, hat das Objekt gebaut fertig, bevor Sie versuchen, um es zu verweisen: nicht das Objekt, um die Werte zu verketten

var urlProps = { 
    searchTerm: "searchSTUFF", 
    baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", 
    tailURL: "&rawcontinue=&callback=?" 
} 

// here it can find it... 
urlProps.finalURL = urlProps.baseURL + urlProps.searchTerm + urlProps.tailURL; 

Answer 4

this.baseURL, this.searchTerm und this.tailURL sind alle undefined an diesem Punkt in dem Objekt-Literal. Sie haben die endgültige URL in einer separaten Erklärung zu generieren:

var urlProps = { 
    searchTerm: "searchSTUFF", 
    baseURL: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exsentences=1&exlimit=10&exintro=&explaintext=&titles=%20&generator=search&gsrsearch=", 
    tailURL: "&rawcontinue=&callback=?" 
}; 
urlProps.finalURL = urlProps.baseURL + urlProps.searchTerm + urlProps.tailURL; 

Das Objekt existiert erst nach der Anweisung mit dem Objektliteral und innerhalb der Objektliteral this verweist auf das window Objekt (oder was auch immer der Kontext ist), nicht zu dem Objekt, das erstellt werden soll.