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

Question

下記のコードについて、始めに
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);
		});
	}
};

Answer 1

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