「關於JavaScript中物件的二三事」

物件，也就是Object。在進到和物件有關的面試題目前，要先花一些篇幅和大家簡單介紹一下什麼是物件。

創建的方法：

首先，我們要先知道怎麼製作出物件，主要有以下幾個方法：

方法1. 宣告物件

const leo = { name: “Leo”, breed: "Ragdoll", fur_color: "pointed" }

方法2. 使用new Object()，並指定其屬性

const maru = new Object()
maru.name = 'Maru'
maru.breed = 'Munchkin'
maru.fur_color = 'tortoiseshell'

方法3. 使用建構函式

首先先定義一個建構函式，並利用new對其生出一個實體

建議這個建構函式要以大寫英文字幕為開頭

function Cat(name, breed, fur_color) {
  this.name = name // 執行此建構函式時帶入的引數，就會直接被指定成新的物件的屬性值
  this.breed = breed
  this.fur_color = fur_color
}

野生的this出現了！！！不用擔心，日後也會介紹喔！先把這邊的this看作指向新創造出的實體即可
這樣可以有規則的生出新的物件喔～

const leo = new Cat('Leo', 'Ragdoll', 'pointed')
const maru = new Cat('Maru', 'Munchkin', 'tortoiseshell')
const sora = new Cat('Sora', 'Mixed', 'orange')

console.log(leo) 
// Object {
//  breed: "Ragdoll",
//  fur_color: "pointed",
//  name: "Leo"
// }

方法4. 使用Object.create

這個方法是利用一個原型物件來當作你其他物件的基礎，其中也能設定預設值(default)給它，而不需要另外定義一個建構函式。而從這個原型物件所生出來的實體，會繼承原型的所有屬性（除非被蓋掉，例如下面範例的name）

const Cat = {
  name: '',
  ear: 2, 
  mouth: 1,
  leg: 4,
  breed: 'mixed', 
  talk: function(){
    return this.name + ': Meow' 
    // 若會用到this，要小心建立此函式時不得用箭頭函式
  }
}

const leo = Object.create(Cat)
leo.name = "Leo"
console.log(leo.talk()) // "Leo: Meow"

但由於一些舊的瀏覽器並不支援這個方法Can I use Object.create?，所以使用上也要注意，專案是否有需要支援一些較舊的瀏覽器。

明天我們將會繼續針對物件做更進一步的介紹，包括要怎麼從物件存取他的屬性。接著才會是帶一些面試問題給各位參考喔☺️
謝謝你的觀看～若有錯誤或可以討論的地方，就麻煩不吝指正了！！

後記：

其實當初第一次看到JavaScript的「物件」這個詞時，有點霧裡看花ヽ(✿ﾟ▽ﾟ)ノ。因為筆者最先接觸的程式語言是ruby，而ruby本身有一個叫做Hash的物件，且他在「外觀上」和JavaScript的物件如出一徹：

// ruby hash
leo = { name: “Leo”, breed: "Ragdoll", fur_color: "pointed" }

// JavaScript object
const leo = { name: “Leo”, breed: "Ragdoll", fur_color: "pointed" }

而關於這兩者的共同點與相異之處，筆者有找到一篇說明得滿完整的——Are Hashes in Ruby the same as Objects in JavaScript?。這邊將節錄其結論：

In conclusion, hashes in Ruby and objects in Javascript in comparison may appear to look quite similar. However the functionality of both are quite different. While Ruby hashes serve to be versatile in their keys, allowing them to be of any data type, Javascript objects demonstrate versatility in its functionality allowing us to pass functions as values of its property!

＠翻譯翻譯

總的來說，ruby中的Hash與JavaScript中的Object確實是看起來非常相像。但在功能性的方面，兩者有著頗大的相異之處。其中，Hash的鍵(key)可以接受多種資料型態，包括：字串、符號、整數；而Object則是完整呈現了JavaScript的一級函式特性，得以讓函式成為物件裡面的其中一個或者多個屬性的值。

除此之外，Hash在ruby中是可以直接比較是否為子集的：

// 子集合(不包含相等)
cat = {ear:2, mouth:1}
leo = {ear:2, mouth:1, fur_color:"white"}
p cat < leo #=> true , cat為leo的子集合
p leo < leo #=> false
p leo < cat #=> false

// 包含相等
cat = {ear:2, mouth:1}
leo = {ear:2, mouth:1, fur_color:"white"}
p cat <= leo #=> true
p leo <= leo #=> true
p leo <= cat #=> false

在JavaScript的話，則需要借助套件的力量

Find if an object is subset of another object in javascript