ガレコレ [Garage Collection]

2017年6月6日(火)
[JavaScript] String Object #HTML5&CSS3&JavaScript

　JacaScriptのオブジェクトについて、掘り下げていきます。初級のお話ではないのですが、分かるように構成、記述してつもりなので、眺めてみて下さいな。

　今回は、『変数』と『オブジェクト』の違いをテーマにしました。オブジェクトとは『塊（かたまり）』とイメージしてみて下さい。プログラムは、下記およびリンクを参照して下さい。

　文字列"Garage Collection"を、$str変数に代入、$objオブジェクトとして生成します。
--
$str = "Garage Collection";

$obj = new String("Garage Collection");
--

　$str変数および$objオブジェクトに、プロパティp1とp2を設定してみます。
--
$str.p1 = "jp";
$str.p2 = 2004;

$obj.p1 = "jp";
$obj.p2 = 2004;
--

　まずは、文字列自身の出力は同じです。

　そして、文字列のlengthプロパティについては、どちらも17文字と出力します。

　次に、for inループで出力できるプロパティを全部表示しています。いずれも0～16までに、一文字ずつ入っています。

　さて、$objオブジェクトにはp1とp2のプロパティがちゃんと表示されていますが、$str変数にはありません。つまり、変数にはプロパティが付加されていません。

　文字列オブジェクトに独自プロパティを付加できることが分かりました。では、少しそれらの$objオブジェクトのプロパティをいじってみましょう。

　p1プロパティの値である"jp"は、簡単に別の文字"japan"に置き換えられます。
--
$obj["p1"] = "japan";
--

　p2プロパティは、delete演算子で消去され、"undefined"未定義と表示されます。
--
delete $obj.p2;
--

　7プロパティは、変更できません。参照のみのプロパティなのです。
--
$obj["7"] = "c";
// "C"のまま
--

　そもそも、lengthプロパティは、for inループで出力されませんでした。実は、各プロパティには属性が設定されており、下記の種類があります。

・DontEnum: for inで列挙されない
・ReadOnly: 代入処理が無視される
・DontDelete: delete演算子での削除処理が無視される
・Internal: 直にアクセスできない
--
［参考］
JavaScriptにおけるオブジェクトの基本的性質：
CodeZine（コードジン）
http://codezine.jp/article/detail/220
--

　オブジェクトであれば、独自プロパティを設定できました。変数ではできませんでした。

　オブジェクトという塊が、ぼやっと見えましたでしょうか？

--
<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width">

<script>

window.onload = _start;

function _start(){

$html = '';

// 変数 $str

$str = "Garage Collection";
$str.p1 = "jp";
$str.p2 = 2004;

$html += '$str '+$str+' ';

$html += 'length => '+$str.length+' ';

for($key in $str){
$html += $key+' => '+$str[$key]+' ';
}

$html += '<hr>';

// オブジェクト $obj

$obj = new String("Garage Collection");
$obj.p1 = "jp";
$obj.p2 = 2004;

$html += '$obj '+$obj+' ';

$html += 'length => '+$obj.length+' ';

for($key in $obj){
$html += $key+' => '+$obj[$key]+' ';
}

$html += '--';

$obj["p1"] = "japan";
$html += 'p1 => '+$obj["p1"]+' ';

delete $obj.p2;
$html += 'p2 => '+$obj["p2"]+' ';

$obj["7"] = "c";
$html += '7 => '+$obj["7"];

document.getElementById("memo").innerHTML = $html;
}

</script>

<title>[JavaScript] String Object</title>

</head>

<body>

[JavaScript] 
String Object

<hr>



<hr><hr>

presented by Garage Collection

</body>

</html>
--
http://neconote.jp/prg/stringObject.html