在同一页面上的两个相似的对象

问题描述：

我正在通过一本JavaScript书，我正在研究用Literal Notation创建对象。在同一页面上的两个相似的对象

我给这个代码：

var hotel = { 
name: 'Quay', 
rooms: 40, 
booked:25, 
checkAvailability: function() { 
return this.rooms - this.booked; 
} 
} 

var hotelName = document.getElementById('hotel-name'); 
hotelName.textContent = hotel.name; 

var freeRooms = document.getElementById('free-rooms'); 
freeRooms.textContent = hotel.checkAvailability();

我明白这完美的罚款。

然后告诉我'如果在同一页面上有两个对象，您可以使用相同的符号创建每个对象，但将它们存储在具有不同名称的变量中。

我试图在JSFiddel中创建这个，但似乎失败了，我不知道为什么。任何人都可以提出一个简单的例子和解释。这真的很有帮助。

编辑::我不知道它是否是告诉我，我会写entirly另一个对象或将链接到名称/房等现有对象内部的一些变量..提前

感谢。

参考：约翰·达克特 - 的JavaScript和JQuery

请显示你已经尝试过。应该像那句话所说的那样工作，即：'var obj = {}，obj2 = {}' – tymeJV

它可能在书本身就像答案一样。也许在这之前你错过了一些东西。或者还没有提前阅读。无论如何，这个问题的含义并不十分清楚。 –

对不起，我不是说它没有工作，我只是想找一个关于它如何写的探索，我只是努力去理解这个探索。 –

答

您可以使用此为一类，这样你就可以通过键入new Hotel(name, rooms, booked)

function Hotel(name, rooms, booked) { 
 
    this.name = name; 
 
    this.rooms = rooms; 
 
    this.booked = booked; 
 
} 
 

 
Hotel.prototype = { 
 
    checkAvailability: function() { 
 
    return this.rooms - this.booked; 
 
    } 
 
} 
 

 
var hotel = new Hotel('Quay', 40, 25); 
 
var hotel2 = new Hotel('Hotel2', 50, 45); 
 

 
var hotelName = document.getElementById('hotel-name-1'); 
 
hotelName.textContent = hotel.name; 
 

 
var freeRooms = document.getElementById('free-rooms-1'); 
 
freeRooms.textContent = hotel.checkAvailability(); 
 

 
var hotelName = document.getElementById('hotel-name-2'); 
 
hotelName.textContent = hotel2.name; 
 

 
var freeRooms = document.getElementById('free-rooms-2'); 
 
freeRooms.textContent = hotel2.checkAvailability();

<div id='hotel-name-1'></div> 
 
<div id='free-rooms-1'></div> 
 
<br> 
 
<div id='hotel-name-2'></div> 
 
<div id='free-rooms-2'></div>

答

好重用酒店的对象，你可以存储结构相同，但值不同的对象。让我包装一下你的例子中的物体成泵出不同酒店的功能解释，具有相同的结构

function hotel(name, rooms, booked) { 
 
    var hotel = { 
 
    name: name, 
 
    rooms: rooms, 
 
    booked: booked, 
 
    checkAvailability: checkAvailability 
 
    }; 
 

 
    return hotel; 
 
} 
 

 
//lets seperate the checkAvailability function from the function so it can be reused. 
 
function checkAvailability() { 
 
    return this.rooms - this.booked; 
 
} 
 

 
var hotel1 = hotel("quay", 40, 25); 
 
var hotel2 = hotel("Ocean View", 50, 20); 
 
console.log(hotel1); 
 
console.log(hotel2); 
 
console.log(hotel1.checkAvailability()); 
 
console.log(hotel2.checkAvailability());

欢迎来自Mouser的快速问题，当您写入......名称：名称或房间：房间时，Javascript会自动使用参数的参数替换第二个“名称”或“房间”？ Jope这是有道理的，对于所有这些术语来说都是新的.. –

是的，它接受函数中提供的参数，并将它们分配给对象。最后它将对象返回给具有指定属性的变量。 – Mouser

答

和使用酒店通过ES6类不同的情况下多了一个例子：

class Hotel { 
    constructor(name, rooms, booked) { 
    this.name = name; 
    this.rooms = rooms; 
    this.booked = booked; 
    } 

    get checkAvailability() { 
    return this.rooms - this.booked; 
    } 
} 

const hotelOne = new Hotel('First', 44, 21), 
     hotelTwo = new Hotel('Second', 21, 5); 
console.log(hotelOne.checkAvailability); 
console.log(hotelTwo.checkAvailability);

在同一页面上的两个相似的对象

相关推荐