018-JavaScriptの変数のスコープについて

年末年始は、なるべく育児と家事をしようと思っていたのと、ファイルサーバとして利用していた旧MacbookのHDDがクラッシュして自宅のネットワーク環境を再整備するのに時間をとられて開発の時間があまり取れませんでしたが、今日から再び開発再開していこうと思います。

JavaScriptの変数のスコープについて

前回書いたエントリで

this.html_bodyのthisが自分が意図したCrawler.parseではなくどうも違うものを指しているみたい

という事を書きましたが、JavaScriptの変数のスコープについて自分の理解をまとめてみようかと思います。

手軽に確認するために今回はGoogle ChromeのFirebugのconsoleを使って下記のようなソースを実行しました。

var objScope = function(){};
objScope.prototype = {
set:function(){
var value = 'this is a test'
return function(){
console.log(value);
};
}
};
var O = new objScope();
O.set();

ちょっと見づらくてすみませんが、上記の赤字から青字の変数が参照できるのかと思っていましたが、実行すると自分の意図した値は取得できず、function()という値が返ります。

意図したような動作をさせるために、以下のように書き換えればいいということを今回色々調べて初めて知りました。

var objScope = function(){};
objScope.prototype = {
  set:function(){
    return function(){
      console.log(value);
    }(value);
  }
};
var O = new objScope();
var value = 'this is a test';
O.set(value);

上記を踏まえて以前のYQLのコードを見直したが・・・

上記の理解が出来たつもりだったので、以下のようにして前回書いたソースを以下のようにしてみたのですが、そもそもエラーになってしまい実行できなかった・・

Crawler.parse = function(url){
  this.first_url = url;
  this.contents = null;
};
Crawler.parse.prototype = {
  start:function(){
    var value = "";
    if(Crawler.isConnected()){
      Titanium.Yahoo.yql('select * from html where url="' + this.first_url + '"',function(e){
	try {
	  Titanium.API.info(e.data.body);
	} catch(E) {
	  Titanium.API.error("Error = " + E);
	}
      })(this.contents);
//以下省略

Titanium.Yahoo.yqlを実行した後のコールバック関数というものを設定するのでしょうけど、関数ではなく単純に、data.bodyだけ返すような書き方がどうやってもうまくいかない。

次回書きたいこと

• Titanium.Yahoo.yql使った処理に関して
• Titanium.Yahoo.yql使わず、自分が欲しいデータ構造を返すWebアプリ開発について再考