質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.26%

  • JavaScript

    11763questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javascript オブジェクト自身を変数へ代入する目的

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 118

birdeater52

score 11

下記のコードについて、始めに
var thisE = this; とあるのですが
これは、例えば
var obj = new Accordion(_data);
としたときに、変数にオブジェクト自身を代入する、ということになると思うのですが
これはどういった目的でするのでしょうか

function Accordion(_data){
    var thisE = this;
    this.activeClass = _data.activeClass;
    this.$btn = _data.$btn;
    this.$target = _data.$target;

    this.savedCSS = null;
    this.$btn.on('click', function(){this.blur();thisE.btnClicked();return false;});

    this.onBeforeDIsplayChange = function(){return true;};
    if(typeof _data.onBeforeDisplayChange == 'function'){
        this.onBeforeDIsplayChange = _data.onBeforeDisplayChange;
    }

    this.onAfterDisplayChange = function(){};
    if(typeof _data.onAfterDisplayChange == 'function'){
        this.onAfterDisplayChange = _data.onAfterDisplayChange;
    }
}
Accordion.prototype.btnClicked = function(){
    this.displayChange(!this.$btn.hasClass(this.activeClass));
};

Accordion.prototype.displayChange = function(_flg){
    var _ret = this.onBeforeDisplayChange(_flg);
    _ret = (typeof _ret=='undefined')?true:_ret;
    if(!_ret) return;

    var thisE = this;
    if(_flg){//open
        this.$btn.addClass(this.activeclass);
        this.$target.stop().slideDown('300', function() {
            thisE.onAfterDisplayChange(_flg);
        });
    }else{//close
        this.$btn.removeClass(this.ctiveclass);
        this.$target.stop().slideUp(300,'swing', function(){
            thisE.onAfterDisplayChange(_flg);
        });
    }
};
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+5

JavaScriptのthisキーワードをちゃんと理解する
から、言葉をお借りして使わせていただくと、thisは、その時点でのコンテキスト(環境)において「自分自身」を参照するキーワードです。
コンテキストが変わるとthisが参照しているオブジェクトも変わります。
このような退避をさせるのは、ほぼ、クロージャ内でクロージャ外のthisを使用する場合です。
クロージャーとは、これもまた
JavaScriptでクロージャ入門。関数はすべてクロージャ?
から言葉をお借りすると「自分を囲むスコープにある変数を参照できる関数」のことを言います。
つまり、クロージャ関数内では、クロージャを囲むスコープ内の変数にアクセスできます。

function hoge() {
   var a = 100; 
   piyo.onclick = function() {
      var b = a;
      console.log(a, b);  // 100 100
   };
   hogehoge.addEventListener('click', function() {
      var c = a + 100;
      console.log(a, c);  // 100 200
   });
}

ただし、thisは前述のようにそのコンテキストでの「自分自身」を参照するキーワードで変数とは違いますので、
以下のように、各スコープ内でthisを使用した場合、それぞれthisが参照するオブジェクトが変わってきます。

function hoge() {
   // this === hogera
   piyo.onclick = function() {
      // this === piyo
   };
   hogehoge.addEventListener('click', function() {
     // this === hogehoge
   });
}

じゃあ、クロージャ外、つまりhoge関数でのthisをpiyoやhogehogeのクリックイベントハンドラ(クロージャ)内で参照したい場合はどうするかというと、クロージャは「自分を囲むスコープにある変数を参照できる関数」ですので、別変数に代入し、その変数をpiyoやhogehogeのクリックイベントハンドラ内で使用することで、hoge関数でのthisにアクセスできるようになります。

function hoge() {
   var thisE = this;
   // this === hogera
   piyo.onclick = function() {
      // thisE = hoge関数コンテキストでのthis
      // this === piyo
   };
   hogehoge.addEventListener('click', function() {
      // thisE = hoge関数コンテキストでのthis
      // this === hogehoge
   });
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.26%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11763questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。