Concatenazione dei valori delle proprietà di un oggetto restituisce NaN (Javascript)

Question

Ho un oggetto con più proprietà, ogni proprietà ha un valore che è una stringa. Quando provo a concatenare i valori di ogni proprietà, restituisce NaN.

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 

Che cosa sto facendo male qui, o qual è il modo corretto di farlo?

Answer 1

Al punto in cui si sta cercando di concatenare i valori l'oggetto non è ancora stato creato.
Anche this non rappresenterebbe l'oggetto in nessun caso. Lo useresti in un costruttore o in un metodo di oggetto.
Per ottenere il risultato desiderato, dovrai farlo.

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

Io suggerirei di usare la funzione

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

Il motore JS non riesce a trovare this.baseUrl o this.searchTerm o this.tailUrl quando si cerca di costruire finalUrl perché l'oggetto si sta costruendo non 'esiste' a fini di riferimento, fino il motore finisce di costruirlo (allo }).

Per fare questo lavoro, è necessario assicurarsi che l'oggetto ha finito di essere costruito prima di tentare di fare riferimento ad esso:

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 e this.tailURL sono tutti undefined in quel punto l'oggetto letterale. È necessario generare l'URL finale in una dichiarazione separata:

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; 

L'oggetto esiste solo dopo la dichiarazione con l'oggetto letterale e all'interno dell'oggetto letterale this punti all'oggetto window (o qualunque sia il contesto è), non è all'oggetto da creare.