LoginSignup
1
1

More than 5 years have passed since last update.

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

Posted at

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から実行してるからそりゃそうかぁってなるんだけど勉強になった。
もう少し理解を深められるように頑張ろうと思うのでしたまる。

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1