JavaScriptについて少し整理してみた（基本ほりさげ②）

※この記事はドラフト版です。

Javaと同じような感覚で使っていると、すごく違和感があるのでちゃんとJavaScriptの基本から確認してみました。

オブジェクトとオブジェクトリテラル

let person = {
  name: "John",
  age: 30,
  gender: "male",
  greet: function() {
    console.log("Hello, my name is " + this.name + ".");
  }
};

定義

オブジェクトはプロパティの集合。プロパティとは名前（キー）と値（バリュー）が対になったもの。
オブジェクトリテラル{}という記法を用いて、オブジェクトを生成できる。

現在の認識

よく理解できないので、いったんこの認識で突き進む。

• クラスが前提ではない？javaのようにクラス作ってインスタンス化していく使い方をしない。
• オブジェクトがインスタンスのような感覚？
• 構造体とインスタンスの境目がないようなイメージ？

オブジェクトの複製

パターン１

同じものを書く

let person1 = {
  name: "John",
  age: 30,
  gender: "male",
  greet: function() {
    console.log("Hello, my name is " + this.name + ".");
  }
};

let person2 = {
  name: "Jane",
  age: 25,
  gender: "female",
  greet: function() {
    console.log("Hello, my name is " + this.name + ".");
  }
};

パターン２

オブジェクトのコピーを作る

1. テンプレートのオブジェクトを作成
2. Object.assignメソッドでテンプレートオブジェクトを新しいオブジェクトにコピー

let personTemplate = {
  name: "",
  age: 0,
  gender: "",
  greet: function() {
    console.log("Hello, my name is " + this.name + ".");
  }
};

let person1 = Object.assign({}, personTemplate);
person1.name = "John";
person1.age = 30;
person1.gender = "male";

let person2 = Object.assign({}, personTemplate);
person2.name = "Jane";
person2.age = 25;
person2.gender = "female";

パターン３

関数を使用してオブジェクトを生成する
※これがclassに近い

function createPerson(name, age, gender) {
  return {
    name: name,
    age: age,
    gender: gender,
    greet: function() {
      console.log("Hello, my name is " + this.name + ".");
    }
  };
}

let person1 = createPerson("John", 30, "male");
let person2 = createPerson("Alice", 25, "female");

person1.greet(); // Output: Hello, my name is John.
person2.greet(); // Output: Hello, my name is Alice.

継承

ポイント

1. 子オブジェクト内でcall()メソッドを使って親オブジェクトのコンストラクタを呼びだす
2. Object.create()メソッドを使ってAnimalのプロトタイプをDogに設定

なんかここでnew演算子が出てきた。

// 親オブジェクト
function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log("My name is " + this.name + ".");
}

// 子オブジェクト
function Dog(name, breed) {
  Animal.call(this, name); // 親オブジェクトのコンストラクタを呼び出す
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // Animalのプロトタイプを継承
Dog.prototype.constructor = Dog; // constructorの再設定

Dog.prototype.bark = function() {
  console.log("Woof!");
}

// インスタンスの作成
let myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayName(); // Output: My name is Buddy.
myDog.bark(); // Output: Woof!

クラス?

まとめ