同じページの2つの同様のオブジェクト

Question

私はJavaScriptの本を進めていますが、現在はリテラル表記でオブジェクトを作成しています。

私はこのコードを与えています：

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(); 

私は完全に罰金このことを理解しています。

それから、私にはと言っています。同じページに2つのオブジェクトがある場合は、同じ表記を使用してそれぞれを作成しますが、異なる名前の変数に保存します。

私はJSFiddelでこれを作成しようとしましたが、失敗しているように見えます。理由はわかりません。誰かが簡単な例と説明を投稿してください。それは本当に役立つだろう。

EDIT ::私は私がentirly別のオブジェクトを書いたり、名前/部屋などへのリンクを既存のオブジェクト内のいくつかの変数を置くだろうと私に言っているかどうかわからない...事前に

感謝。

参考：ジョン・ダケット - JavaScriptとjQueryの

Answer 1

あなたがさて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>

Answer 2

を入力して、ホテルのオブジェクトを再利用することができますので、あなたは、クラスとしてこれを使用することができます構造は同じですが値が異なるオブジェクトを格納できます。私は同じ構造ES6-クラスを介して別のインスタンスであなたのホテルを使用して

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());

Answer 3

そして、もう一つの例で、別のホテルを送り出す機能にあなたの例のオブジェクトをラップすることによってこれを説明してみましょう：

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);