Javascript オブジェクト指向とは噛み砕くとこんな感じでしょうか？

Question

###オブジェクト指向を例えを少しJavascript風にすると下記のような感じでしょうか？
オブジェクト指向を学んでおります。
参考書や色々なサイトにある例え話は何となく分かるのですが、
それをコードに置き換えるとまだイメージを掴みきれておりません。

そこで例え話をもう少しコードに、置き換える例えがあればと思い投稿させて頂きました。
この例えで継承もうまく例えられてないので追記して頂けたらありがたいです。
数ある例をそのまま引用すると意味がないと思った為、
自分で考えて書いてみました。

当方の書き方が分かりづらくもっと分かりやすい例えがあれば、
ご教授いただけませんでしょうか？
間違いのご指摘や追記など大歓迎です。
宜しくお願いします。

猫 = クラス
猫のタマ ＝ オブジェクト
猫のクロ ＝ オブジェクト
猫のシロ ＝ オブジェクト

猫のタマの年齢 ＝ プロパティ
猫のタマの毛の色 = プロパティ
猫のタマの性別 = プロパティ

猫のタマが魚を食べる = メソッド（プロパティの一部）
猫のクロが縁側で日向ぼっこ = メソッド（プロパティの一部）
猫のシロがグルーミング = メソッド（プロパティの一部）

連想配列 = {
"プロパティ名1":"値1",
"プロパティ名2":"値2",
"プロパティ名3":"値3"
}

###該当のソースコード

var 猫 = {}
var タマ = {
  "種類":"猫",
  "年齢":"5",
  "毛の色":"brown",
  "性別":"Male"
  "猫が猫騙しをする":function(){
  	slapping hands;
  };
  "魚を食べる":function() {
    eat_fish;
  }
}

var クロ = {
  "種類":"猫",
  "年齢":"8",
  "毛の色":"black",
  "性別":"Male"
  "猫が猫騙しをする":function(){
  	slapping hands;
  };
  "縁側で日向ぼっこ":function() {
    sleep;
  }
}

var シロ = {
  "種類":"猫",
  "年齢":"2",
  "毛の色":"white",
  "性別":"Female"
  "猫が猫騙しをする":function(){
  	slapping hands;
  };
  "グルーミング":function() {
    grooming;
  }
}

Comments

[think49]

質問文中のコードは SyntaxError になり、有効なコードではありません。最低限、エラーはなくすように修正した方が良いと思います。

[bellsmarket]

失礼いたしました。あくまでもJavascript風ということです。コードだけでなく考え方的な部分も指摘いただけるとありがたいです。

Answer 1

コンストラクタ (ECMAScript 3)

紹介されている例をコードに表すと、次のように書けると思います。

'use strict';
function Cat (name, age, color, sex, thisFunctions) {
  this.name = name;
  this.age = age;
  this.color = color;
  this.sex = sex;

  for (var i = 0, len = thisFunctions.length, fn; i < len; ++i) {
    fn = thisFunctions[i];
    this[fn[0]] = fn[1];
  }
}

Cat.prototype = {
  slappingHands: function slappingHands () {
    console.log('slapping hands');
  }
};

function eatFish () {
  console.log('eat fish');
}

function sleep () {
  console.log('sleep');
}

function grooming () {
  console.log('grooming');
}

var tama = new Cat('タマ', 5, 'brown', 'Male', [['eatFish', eatFish]]),
    kuro = new Cat('クロ', 5, 'brown', 'Male', [['sleep', sleep]]),
    shiro = new Cat('シロ', 5, 'brown', 'Male', [['grooming', grooming]]);

console.log(tama);
console.log(kuro);
console.log(shiro);

class 構文 (ECMAScript 6)

上述のコードを ECMAScript 6 規定の class 構文を使って書き直すと、次のようになります。

'use strict';
class Cat {
  constructor (name, age, color, sex, thisFunctions) {
    this.name = name;
    this.age = age;
    this.color = color;
    this.sex = sex;

    for (var i = 0, len = thisFunctions.length, fn; i < len; ++i) {
      fn = thisFunctions[i];
      this[fn[0]] = fn[1];
    }
  }

  slappingHands () {
    console.log('slapping hands');
  }
}

Re: bellsmarket さん

Answer 2

ちょっと無理やり書いてみました

function 猫(名前,年齢,毛の色,性別,鳴き声){
  this.種類="猫";
  this.名前=名前;
  this.年齢=年齢;
  this.毛の色=毛の色;
  this.性別=性別;
  this.機嫌="普通";
  this.鳴き声=鳴き声;
  this.機嫌が変わる=function(x){
    if(x=="怒る"){
      this.機嫌="怒る";
    }else if(x=="機嫌がいい"){
      this.機嫌="機嫌がいい";
    }else{
      this.機嫌="普通";
    }
  };
  this.鳴く=function(){
    alert(鳴き声[this.機嫌]);
  }
}
var 猫1= new 猫("タマ",5,"茶色","メス",{"普通":"ニャン","怒る":"フィギャー!","機嫌がいい":"ゴロニャ"});
var 猫2= new 猫("クロ",5,"黒","オス",{"普通":"ニャー","怒る":"ニャギャー!","機嫌がいい":"ニャ～"});

alert(猫1.名前+"の毛は"+猫1.毛の色);
猫1.鳴く();
猫1.機嫌が変わる("機嫌がいい");
猫1.鳴く();

Answer 3

javascriptで～と書いていますがjavascriptは特殊なので中途半端にjavascriptの考え方は入れずに、クラスとインスタンスで考えたほうがいいと思います。
(混乱すると思うのでこれは気にしなくていいですが、本当を言うとjavascriptにクラスなんて存在しませんし)

その上でまとめると、こんな感じですかね。

【文章でのまとめ】

猫はクラスです。
猫クラスには…
・年齢、毛の色、性別のプロパティが定義されています。
・魚を食べる、縁側で日向ぼっこ、グルーミングのメソッドが定義されています。

猫のタマ、クロ、シロは、猫クラスから作った猫インスタンスです。

猫インスタンスはそれぞれ、年齢、毛の色、性別のプロパティ値を持っています。
例）クロの毛の色プロパティは、Blackという値。
　　シロの毛の色プロパティは、Whiteという値。

猫インスタンスのそれぞれから、魚を食べる、縁側で日向ぼっこ、グルーミングのメソッドを実行できます。
メソッドは、各猫インスタンスの持つプロパティなどの状態を使って実行されます。
例）クロのグルーミングを実行すると、Blackな毛の手入れをすることを実行。
　　シロのグルーミングを実行すると、Whiteな毛の手入れをすることを実行。