【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);