2021/12/13
JavaScript では重要な要素であるオブジェクト。
PHPでのオブジェクト指向はわかるのですが、JavaScript においてはやっぱりちょっと勝手が違ったりします。
なので、これをきちっと整理して理解することが JavaScript の「中級者」への第一歩だといえるかもしれません。
そんなわけで今回は JavaScript においてのオブジェクトについてエントリーします。
オブジェクトとは？
オブジェクトとは、直訳すると「物」になるのですが、「データのあつまり」と覚えてしまったほうがいいかもしれません。
オブジェクトが持つデータには大きく分けて「プロパティ」と「メソッド」があります。
プロパティは基本的に変数と同じものだと考えていいでしょう。
一方、メソッドはオブジェクトの中に関数をしまったとき、その関数をメソッドといいます。
例 ※オブジェクトリテラルでの記述
var user = {
name: "suzuki", // プロパティ
height: 160, // プロパティ
age: 22, // プロパティ
printName: function(){ // メソッド
console.log(this.name);
}
};
上記の例はオブジェクトリテラルでの記述ですが、こんな感じでプロパティとメソッドを定義していきます。
次にオブジェクトの定義の仕方について細かくみていきます。
オブジェクトの定義
JavaScript においてプロパティやメソッドを実装したオブジェクトの作成方法は主に二つあります。
１）関数オブジェクト
２）オブジェクトリテラル
１）関数オブジェクト
書式
ここが JavaScript でややこしいところなのですが、関数もオブジェクトの扱いができます。
つまりこの場合、書式は関数と同じになります。
ちなみに関数オブジェクトとは関数のように振る舞うことのできるオブジェクトのことです。
オブジェクトの宣言部
function オブジェクト名(){
（プロパティの宣言）
：
（メソッドの実装）
：
}
プロパティの宣言
this.プロパティ名 = 値 ;
メソッドの実装
this.メソッド名 = function(){
};
インスタンスの作成
new 演算子によりそのオブジェクトのインスタンスを作成します。
変数名 = new オブジェクト名();
書式例
オブジェクトの宣言部
function product(){
this.name = "Candy"; // プロパティ
this.price = 150; // プロパティ
this.getInfo = function(){ // メソッド
return this.name + "=" + this.price + "円";
}
}
インスタンスの作成
prod = new product();
２）オブジェクトリテラル
書式
以下のような簡易型の書式（オブジェクトリテラル）で記述した場合は、new によるインスタンスを作成しなくてもOKです。
オブジェクト名として記述した変数がインスタンスになります。
オブジェクトの宣言部
var オブジェクト名 = {
（プロパティの宣言）
：
（メソッドの実装）
：
}
さらにプロパティの宣言とメソッドの実装の仕方について細かく見ていきます。
プロパティの宣言
プロパティの宣言の書式は プロパティ名 : 値 になります。
複数の項目を記述する場合は "," で区切ります。
プロパティ名 : 値 ,
プロパティ名 : 値 ,
プロパティ名 : 値 ,
プロパティ名 : 値
メソッドの実装
メソッド名 : function () {
： ( 実装 )
}
書式例
var obj = {
name: "Candy" , // プロパティの宣言
price: 150 , // プロパティの宣言
getInfo: function(){ // メソッドの実装
return this.name + "=" + this.price + "円";
}
}
演習
オブジェクトリテラル（簡易型のオブジェクト定義）の書式でオブジェクトのメソッドを呼び出してみます。
ソース
<html>
<head>
<title>演習</title>
<script type="text/javascript" language="javascript">
/* オブジェクトの作成 */
var taxObject = {
taxRate: 0.08, // プロパティを定義
taxIncludePrice: function(arg){ // メソッドを定義
return arg * (1+this.taxRate);
}
}
</script>
</head>
<body>
<script>
// オブジェクトリテラルの書式ではnewしなくてもOK
document.write('税込み：' + taxObject.taxIncludePrice(100) + '円');
</script>
</body>
</html>
document.write はドキュメントに文字列を書き出します。
PHPのechoみたいなものです。
<html>
<head>TEST</head>
<body>
<script>
document.write('出力テスト');
</script>
</body>
</html>
JSFiddle
以上です。
Udemyを使ったLaravel学習方法
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。