JavaScript でのオブジェクト作り方

JavaScriptのオブジェクトは、二種類の方法で作成することが出来る

オブジェクトリテラルでの生成

javascript

var obj1 = {  
   val: 'hoge',  
   func: function(){  
     console.log('fuga');  
   } 
};

new演算子での生成

javascript

var obj2 = new Object(); 
obj2.val = 'hoge'; 
obj2.func = function() {  
   console.log('fuga'); 
};

一般的にはオブジェクトリテラルを使う方法が好れる。 変数名に変更があった場合に一箇所だけ直せば済むことや、プロパティやメソッドの宣言が固まっていて見やすかったりするためです。

#ドット演算子によるプロパティアクセス

javascript

var obj = {  
   name : 'hoge' 
}; 


console.log(obj.name); // hoge

ドット演算子でのプロパティアクセスでは、プロパティ名が変数の命名規則に則っている必要があるため、数字から始まっていたり使用できない記号が含まれている名称を使用した場合はエラーになります。

#コンストラクタとnew演算子

オブジェクトのインスタンスを生成するには、コンストラクタをnew演算子で呼び出します。

javascript

function hoge(name) {  
  this.name = name;  
  this.walk = function() {  
   console.log(this.name + 'が歩きます');  
  }; 
}  

var taro = new hoge('太郎'); 
taro.walk(); // 太郎が歩きます

注意として、newを付け忘れると、呼び出そうとした際に「未定義エラー」が発生するため要確認です。

独自オブジェクトの生成

Objectは、JavaScriptの全てのオブジェクトにとって基底となる存在です。 ユーザ独自のオブジェクトを用意する場合は、Objectをインスタンス化してプロパティやメソッドを追加します。

javascript

//Objectをインスタンス化 
var myhoge = new Object();  

//プロパティを追加 
myhoge.name = 'myObj';
  
//メソッドを追加 
myhoge.getName = function() {  
  return this.name; 
}  
//独自オブジェクトのメソッドを呼び出す 
 console.log(myhoge.getName()); // myObj

Objectをインスタンス化したオブジェクトが利用できるメソッドとして、一般的に以下のようなものがあります。

toString

オブジェクトの値を表す文字列を返す

valueOf

指定されたオブジェクトのプリミティブな値を返す

hasOwnProperty

指定したプロパティがオブジェクト自身が保持しているかどうかを返す

#まとめ
##参考

Object について
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object

##すぐに実践できるサイト
https://codepen.io/