Question

我的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

我很确定它的订购和我需要处理的语法，非常感谢任何建议，谢谢！

Answer 1

几乎没有误解：

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>

Answer 2

@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初学者：为什么这不起作用？

2 个答案: