FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

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

【javascript】生成したインスタンスの値をイベントハンドラから取得する

【今回の紹介】


生成したインスタンスの値をイベントハンドラから取得する

【内容】


以下にうまくいかなかった事例とうまくいった事例をまとめておきます。



■主にうまくいかなかった理由

 ①this がDOMノードを優勢してしまうこと
 ②thisが引数でわたせないこと
 


■うまくいかない失敗事例


失敗① update関数のthisのsquareのインスタンスではなく、onclickを行ったDOMノードになっている



function square(name,id,tel){
	this.name=name;
	this.id=id;
	this.tel=tel;
	this.x=0;
	this.y=0;
	this.height=500;
	this.width=500;
	
	

	}
	square.prototype={
		update : function(){
			console.log(this.name);
			console.log(this.id);
			console.log(this.tel);

		}	
	}





■失敗② this.updateがインスタンス生成時に実行されてしまう

	function square(name,id,tel){
	this.name=name;
	this.id=id;
	this.tel=tel;
	this.x=0;
	this.y=0;
	this.height=500;
	this.width=500;
	this.updateThis=this.update(this.name,this.id,this.tel);
	


	}
	square.prototype={
		update : function(name,id,tel){
			console.log(name);
			console.log(id);
			console.log(tel);

		}	
	}


■うまくいった成功事例
 ①DOMノードを引数にインスタンスメソッドに渡す
 ②インスタンスメソッド内でDOMノードを設定
 ③インスタンスメソッド内でthisを引数に別のインスタンスメソッドを呼ぶ
 ④③で読んだインスタンスメソッドのthisからインスタンスの値を取得する

 ※DOMノードから呼び出して、thisを取得するとDOMノードをthisとしてしまうため
   

function square(name,id,tel){
	this.name=name;
	this.id=id;
	this.tel=tel;
	this.x=0;
	this.y=0;
	this.height=500;
	this.width=500;
	}

	square.prototype={
		update:function(self){
			console.log(self.name);
			console.log(self.id);
			console.log(self.tel);
		},
		add:function(elm){
			var self=this;
			elm.onclick=function(){self.update(self);}
		}
	}

//newSquareObjはsquareのインスタンス

function draw(newSquareObj){
	var canvas=$("canvas");
	newSquareObj.add(canvas);
.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; }