JavaScript初學者：為什么這不起作用？
[英]JavaScript beginner: why does this not work?
問題描述
我的html頁面沒有響應我在JS中編寫的這段代碼，我是一個初學者，剛開始學習JS，有人可以告訴我為什么這不起作用？
/* this is a practice file that'll play with js nothing strange to look at here folks! */ var firstName = 'Steven'; var lastName = 'Curry'; var fullName = firstName + ' ' + lastName; function Hotel(HotelName){ this.HotelName = HotelName; this.numRooms = 20; this.numGuests; this.checkAvailability { if(numRooms != 20 ){ return true; } else{ return false; } } this.getHotelName = function(){ //can it work with this dot operator? return this.HotelName; } } var HiltonHotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = getHotelName(); var el = document.getElementById('name'); el.textContent = fullName;
<!DOCTYPE html> <html> <body> <div id = 'greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id = 'hotelName'>Hyatt</span> </div> <script src = "https://stacksnippets.net/js"> </script> </body> </html
我很確定它的訂購和我需要處理的語法，非常感謝任何建議，謝謝！
2 個解決方案
解決方案1
2 已采納 2017-06-27 22:01:31
幾乎沒有誤解：
-
checkAvailability是一個函數，你缺少parens。 - 訪問
getHotelName函數時，您必須引用HiltonHotel變量，才能訪問和調用該函數。 - 您的
html代碼中的一些小錯誤，在代碼段中運行時，您不必添加單獨的腳本，默認情況下它連接在一起。
var firstName = 'Steven'; var lastName = 'Curry'; var fullName = firstName + ' ' + lastName; function Hotel(HotelName) { this.HotelName = HotelName; this.numRooms = 20; this.numGuests; this.checkAvailability = function() { // it's a function (missing parens) if (numRooms != 20) { return true; } else { return false; } } this.getHotelName = function() { return this.HotelName; } } var WeiHotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = WeiHotel.getHotelName(); // refer to the `WeiHotel` variable var el = document.getElementById('name'); el.textContent = fullName;
<div id='greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id='hotelName'>Hyatt</span></h1> </div>
解決方案2
1 2017-06-28 12:06:44
@KindUser答案的擴展：
你沒有在這個類的任何地方使用閉包來存儲一些私有狀態。 因此，您應該將方法附加到原型而不是實例本身。 它更經濟，因為現在所有實例共享一個功能，而不是每個實例共享一個功能。 JS引擎可以更好地優化它。
然后，你在checkAvailability有另一個錯誤： numRooms需要作為this.numRooms來解決，因為它是this實例的屬性，並且沒有帶有此名稱的變量。
一個關於風格。 如果你有類似的東西
if(condition){
return true;
}else{
return false;
}
你可以簡化這個：
return condition;
//or if you want to enforce a Boolean value,
//but your condition may return only a truthy/falsy value:
return Boolean(condition);
//sometimes also written as:
return !!(condition);
下一個。 堅持編碼標准。 在JS中，以大寫字母開頭的變量/屬性表示類/構造函數，因此HotelName ， HiltonHotel ， WeiHotel具有誤導性。
我發現屬性名稱hotelName冗余且反直覺。 Imo你有一個Hotel ，它有一個name ，但這只是一個意見。
var firstName = 'Steven'; var lastName = 'Curry'; var fullName = firstName + ' ' + lastName; function Hotel(name) { this.name = name; this.numRooms = 20; this.numGuests; } Hotel.prototype.checkAvailability = function() { return this.numRooms !== 20; } Hotel.prototype.getHotelName = function() { return this.name; } var hotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = hotel.getHotelName(); // refer to the `weiHotel` variable var el = document.getElementById('name'); el.textContent = fullName;
<div id='greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id='hotelName'>Hyatt</span></h1> </div>
或者作為ES6課程（以及一些游戲） ：
class Person{ constructor(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } //this is a getter, you can read it like a property get fullName(){ return this.firstName + " " + this.lastName; } //this function is implicitely called whenever you try to convert //an instance of `Person` into a string. toString(){ return this.fullName; } } class Hotel{ constructor(name) { this.name = name; this.numRooms = 20; this.numGuests; } checkAvailability() { return this.numRooms !== 20; } getHotelName() { return this.name; } } var steve = new Person('Steven', 'Curry'); var hotel = new Hotel('Hilton'); var hName = document.getElementById('hotelName'); hName.textContent = hotel.getHotelName(); // refer to the `weiHotel` variable var el = document.getElementById('name'); el.textContent = steve.fullName; //this uses the `toString()` method to convert the `Person` steve into a string //for people, this makes sense, for the Hotel you'd want to think: // - where do I want to use this? // - and what should this string contain? console.log("Hello, I'm " + steve + " and I'm at the "+ hotel.name);
<div id='greeting'> Hello <span id="name">friend</span>! <h1>Welcome To the <span id='hotelName'>Hyatt</span></h1> </div>
為什么這不起作用？ JavaScript的
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.