Javascriptオブジェクト指向でのthisの扱い自分メモ

More than 1 year has passed since last update.


thisが場所により指しているものが違う

※Jqueryを使ってソースを記述しています。

javascriptでprototypeを使った擬似的なクラス化ができますが、

場所によってthisの指すものが違ってめんどくさい。メンバ関数をサクッと呼べないのはなぁ……。

そこである程度統一できる記述方法をメモ。

クラス化は調べて日が浅いのでこれ以外にいい方法があれば教えてください。

bind等は検討中...


目標

thisはクラス自身を指すようにしたい。

やり方がわからなかった部分は変数 _self にクラス自身をセット。

原始的だけど一番お手軽だと思う。


方法


class.js

(function(){

/**
* コンストラクタ
**/

function Class()
{
//コールバック用
var _self = this;

//メンバ変数
this.val = 0;

//Eventの登録
$(document).on('click','.onClick',function(){
_self.onClickEvent(this); //コールバック内で_selfからメンバ関数を呼ぶとthisがクラスになる。
});

this.serviceFunction($('#container')); //呼び出せるのでOK
}

/*
* onClickイベント
*/

Class.prototype.onClickEvent = function(e)
{
//eはEventのトリガーとなった要素
$div = $(e).find('#container');
//thisはクラスを指している。
this.serviceFunction($div); //ちゃんと呼び出せる
}

/*
* メンバ関数から呼ばれる
*/

Class.prototype.serviceFunction = function($container)
{
alert(this.var); // var = 0 でOK
alert(this._self); // _self = undefined となるのでOK
}

window.Class = Class;
}(window));

var Class = new Class();


これでとりあえず一通りthis使いそうなところはあまり考えずに使えてよさそう。

メンバ関数のコールバック内とかは _self になっちゃいそうだけどthisに置き換えられないかな……。

せめてコンストラクタ内だけに留めたい。

個人的にちょっとコールバックの事を理解してなかったのであぁそうかとなったのは、

$(document).on('click','.onClick',onClickEvent);

Class.prototype.onClickEvent = function()
{
//ここのthisはトリガーの要素になる。
}

となるのに対して、

$(document).on('click','.onClick',function(){

_self.onCLickEvent();
});

Class.prototype.onClickEvent = function()
{
//ここのthisはクラスになる。
}

ってところかなぁ。

_selfから実行してるからそりゃそうかぁってなるんだけど勉強になった。

もう少し理解を深められるように頑張ろうと思うのでしたまる。