LoginSignup
8
8

More than 5 years have passed since last update.

JavaScript基礎 オブジェクト編

Last updated at Posted at 2017-05-31

オブジェクトについて内容さらっと纏めました。
各組み込みオブジェクトについて深堀した記事を作成しようと思うのでここでは
内容薄いですが参考になると嬉しいです。

オブジェクト

JavaScriptの肝であるオブジェクトについて纏めます。
オブジェクトとはプロパティ名とプロパティ値の組み合わせの集まりです。

オブジェクトリテラル

もっともシンプルに記載するなら以下のようになります。

{}

このオブジェクトにはプロパティを何も記述していませんが、参照しているプロパティがあります。
オブジェクトリテラルに限った話ではないですが、理由はこの後を読み進めて行くと解決するはずです。

var x = {};
console.log("toString" in x);  // true

コンストラクタ

同じプロパティ名を持ち、異なるプロパティ値を持つ複数のオブジェクトを生成する方法としてコンストラクタがあります。
コンストラクタの役割は、オブジェクトを生成し初期化することです。
JavaScriptにはクラスがないので、コンストラクタを用いてオブジェクトを以下のように生成します。

function Human(weight, height) {
  this.weight = weight;
  this.height = height
}

このコンストラクタでオブジェクトを生成するにはnew演算子を用います。

var humanA = new Human(60, 175)
console.log(humanA);  // Human {weight: "60", height: "175"}

コンストラクタは関数です。関数はオブジェクトなのでプロパティに値だけではなく、
関数のへの参照などを代入することができます。オブジェクトのプロパティのうち値が関数オブジェクトへの参照で
あるものをメソッドと呼びます。

組み込みオブジェクト

はじめからJavaScriptに組み込まれているオブジェクトを組み込みオブジェクトと言います。
以下の種類があります。それぞれについては別記事で詳しく書こうと思います。

  • Array
  • Boolean
  • Date
  • Error
  • Function
  • Global
  • JSON
  • Math
  • Number
  • Object
  • RegExp
  • String

プロトタイプ継承

オブジェクトは全てにプロパティとして__proto__を持っています。
オブジェクトの__proto__プロパティは、そのオブジェクトの継承元を参照します。

__protp__によるオブジェクトの参照関係
var objA = {
  name: "neko",
  cry: function() {console.log( this.name + "cry Nyao!")}
};
var objB = {
  name: "dog"
};
objB.__proto__ = objA;
objB.cry();  //  "dog cry Nyao!"

objBはcry()メソッドを持っていませんが、呼び出すことができ、値も返って来ています。
これは__proto__プロパティによって継承元の参照を辿ってメソッドを見つけて実行するからです。

objBはcry()をプロパティに持っているか調べます。見つかりません。
② 次に、objB.__proto__の参照先にcry()があるか調べます。ここでobjB.__proto__の参照先はobjAとなります。
 objAにはcry()があるので、objA.cry()を用います。
③ 次に、objA.cryの中のthis.nameを以下のように見つけていきます。
objB自身がthis.nameを持っているか調べます。
⑤ 見つかるので自身のthis.nameを使用します。

このように自分にないプロパティを__proto__プロパティの参照するオブジェクトへ連鎖的に探しに
いきます。これをプロトタイプチェーンと言います。
自分自身にないプロパティやメソッドをプロトタイプであるオブジェクトに委譲(delegate)していると言います。

終わり

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8