Help us understand the problem. What is going on with this article?

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

NickelCreate
Vue.jsが好きです! Wordpressは嫌いです!
https://nickellab.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした