Ghép các giá trị của một thuộc tính của đối tượng trả về NaN (Javascript)

Question

Tôi có một đối tượng có nhiều thuộc tính, mỗi thuộc tính có một giá trị là một chuỗi. Khi tôi cố gắng ghép các giá trị của mỗi thuộc tính, nó trả về 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 

Tôi đang làm gì sai ở đây, hoặc cách thích hợp để làm điều này là gì?

Answer 1

Tại điểm mà bạn đang cố gắng để nối các giá trị đối tượng có không chưa được tạo.
Ngoài ra this sẽ không đại diện cho đối tượng trong mọi trường hợp. Bạn sẽ sử dụng điều này trong một hàm tạo hoặc một phương thức đối tượng.
Để có được kết quả bạn muốn, bạn sẽ phải thực hiện việc này.

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

tôi sẽ đề nghị sử dụng chức năng

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

Động cơ JS không thể tìm thấy this.baseUrl hoặc this.searchTerm hay this.tailUrl khi cố gắng xây dựng finalUrl vì đối tượng bạn đang xây dựng không 'tồn tại' nhằm mục đích tham khảo cho đến khi nó động cơ kết thúc xây dựng nó (tại }).

Để thực hiện việc này, bạn cần phải chắc chắn đối tượng đã hoàn thành được xây dựng trước khi cố gắng đề cập đến nó:

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 và this.tailURL đều undefined tại thời điểm đó trong đối tượng chữ. Bạn cần phải tạo ra các URL cuối cùng trong một tuyên bố riêng biệt:

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; 

Đối tượng chỉ tồn tại sau khi báo cáo kết quả với các đối tượng theo nghĩa đen và trong phạm vi đối tượng đen this điểm đến đối tượng window (hoặc bất kỳ bối cảnh là), không cho đối tượng được tạo.