新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【javascript】オブジェクトの宣言・インスタンスの生成・カプセル化

【今回の内容】

掲題の通りでーす。

勉強したことのメモです。

【内容】


■JavaScriotのオブジェクトについて

 JavaScriotでもオブジェクトを作成できる
  ・オブジェクトに値(プロパティ)を持てる
  ・オブジェクトに振る舞い(メソッド)を持てる
  ・インスタンスを宣言して使用できる
 

■プロトタイプについて

 ■前提
  ・同じ処理を行うメソッドが、オブジェクトごとに生成される場合がある
    →メモリの無駄遣いになる
   参考
 
■メモ
   ・メソッドをプロトタイプというプロパティに持つことで解決する

■参考ソース

<html>
<body>
</body>
<script language="JavaScript">
window.onload=make_obj;
/*オブジェクトの宣言*/
var obj=function(id,name){
	this.id=id;	
	this.name=name;
	this.test=function(){
		console.log("test");
		};
};

/*オブジェクトのカプセル化*/
var obj10=function(id,name){
	var id=id;	
	var name=name;
	this.test=function(){
		console.log("test");
		};
	this.getId=function(){
		return id;
	}

	this.getName=function(){
		return name;
	}
	this.setId=function(thisId){
		id=thisId;
	}

	this.setName=function(thisName){
		name=thisName;
	}
};





/*インスタンスの生成と使用*/
function make_obj(){
	var obj1= new obj();
	obj1.test();
	var obj2=new obj('002','satou');
	var obj5=new obj10('005','itou');
	
	console.log(obj2.id);
	console.log(obj2.name);
	console.log(obj2);
	console.log(obj5.getName());
	console.log(obj5.getId());
	console.log(obj5.setName('yamada'));
	console.log(obj5.setId('100'));
	console.log(obj5.getName());
	console.log(obj5.getId());
	
	}
</script>
</html>

■おまけ

 ①alertではなくconsole.log
  参考ソースとかでたまに見かけていたが、
  デバックしたり、出力内容を確認するときはconsole.logの方が便利そう
  
   ・一回一回ボタン押さなくてよい
   ・引数にオブジェクトを渡すと中身までコンソールで確認可能
   参考情報

 ②ウィンドウの分割
 アプリ名「シフト」
  http://nwpct1.hatenablog.com/entry/2013/12/28/193012

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }