DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. コンストラクタ、オブジェクトを参照する変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.13】

コンストラクタ、オブジェクトを参照する変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.13】

コンストラクタはnew演算子をともなって呼び出されたときに、共通のプロパティをもったオブジェクトを生成する関数です。

Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で作った「js-study」フォルダ内に、「constructor1.html」というファイル名で保存します。

以下のコードを書いて保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  <script>
  function Book(title, price) {
    this.title = title;
    this.price = price;

    this.getTitle = function() {
      console.log(this.title);
    }
  }

  var book1 = new Book("三四郎", 600);
  var book2 = new Book("こころ", 500);

  console.log(book1);
  console.log(book2);
  
  </script>
  </body>
</html>

Google Chromeで「constructor1.html」を開き、JavaScriptコンソールを開きます。下図のように2つの同じプロパティをもったオブジェクトが生成されていれば成功です。

各オブジェクトの三角形を開くとgetTitleプロパティと__proto__プロパティが見えます。

コンストラクタから同じプロパティをもったオブジェクトを2つ生成しました。

コンストラクタはnew演算子とともに呼ばれることで、以下のような実行を舞台裏でおこないます。太字のところは実際には記述していないのですが暗黙で実行されます。

function Book(title, price) {
  
  this = new Object();
  
  this.title = title;
  this.price = price;

  this.getTitle = function() {
    console.log(this.title);
  }
  
  return this;
}

Objectオブジェクトのコンストラクタをnew演算子で呼び出しています。オブジェクトが生成されます。これでこれを変数thisに割り当てています。ここにプロパティを割り当てています。このコードは前回の「オブジェクト ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.12】」で書いたコードと同じです。最後にreturnthisを戻り値として返しています。

つまりコンストラクタがnewで呼ばれると、空のオブジェクトが生成され、プロパティが追加され、オブジェクトが返されます。

var book1 = new Book("三四郎", 600);

book1変数はコンストラクタが返したオブジェクトを参照します。

instanceof演算子

instanceof演算子を使うと、オブジェクトが特定のコンストラクタから生成されたかを確認できます。
下記のコードを「constructor2.html」というファイル名で保存します。

function Book(title, price) {
  this.title = title;
  this.price = price;

  this.getTitle = function() {
    console.log(this.title);
  }
}

var book1 = new Book("三四郎", 600);
console.log(book1 instanceof Book);

var book2 = {};
console.log(book2 instanceof Book);

オブジェクトが指定のコンストラクタから生成されていれば、true、そうでなければfalseを返します。下記が実行結果です。

true
false

オブジェクトを参照する変数

まず文字列を変数に代入する例をみてみましょう。

var book = "三四郎";
var book1 = book;

console.log(book1);

var book = "こころ";

console.log(book1);

これを実行すると、下記のようになります。

三四郎
三四郎

データ型のうち基本型は、変数に代入すると、変数にデータがコピーされます。基本型は「データ型(基本型) ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.3】」を参照。

つまり
book → “三四郎”
book1 → “三四郎”
という状態になります。2つの文字列オブジェクトが生成され、各変数が個別に参照します。
なのでbook変数の値を変更しても、book1変数の値には影響をあたえません。

ところがオブジェクトを変数に代入した場合は異なります。

var book = {
  title: "三四郎",
  price: 800
};

var book1 = book;
console.log(book1);

book.price = 1000;

console.log(book1);
Object {title: "三四郎", price: 800}
Object {title: "三四郎", price: 1000}

book変数には、オブジェクトのメモリーアドレスが代入され、book1変数にも同じメモリーアドレスがコピーされて代入されます。オブジェクトそのものはコピーされません。

なのでbook変数が参照するオブジェクトの値を変更した場合、book1変数が参照するオブジェクトにも影響を与えます。book変数とbook1変数は、同じオブジェクトを参照しているのです。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
ディレクター
ON VISITINGを制作・運営。
お問い合わせ