Javascriptで関数内から親関数のプロパティにアクセスしたくて困った話。

javascript

本題

最近、ブラウザ上での手動確認やら、手動入力、手動登録とかの作業が多いので、
ユーザスクリプトとかChrome拡張とかよく作っています。

その中で困ったこと？がタイトルの件。

ちょっとわかりにくいですがサンプル。

var obj = function (hoge){
  // この this.hoge を使いたい。
  this.hoge = hoge;
};
obj.prototype.test = function() {

  // アクセス可能  
  console.log(this.hoge);

  var huga = this.hoge;
  var func = function () {
    // アクセス可能
    console.log("huga : " + huga);
    
    // アクセス不可能（thisが違う）
    console.log("this.hoge : " + this.hoge);
  };
  func();
};
var instance = new obj("message");
instance.test();

つまり、関数内で作成した関数から親の関数の要素を呼びたい。
Javascriptだと関数はオブジェクトだったような気がするので、親のオブジェクトのフィールドにアクセスしたい。
という認識で良いのかな？
実際の所、コード上にあるとおり、一回変数に格納すればアクセスが可能になるのだけど、いくつもアクセスしたい場合には意味のない？変数を多く定義しなきゃいけないので非常にかっこ悪い！

解決

数ヶ月間位？困ってて、ユーザスクリプト数本の中で同じようにかっこ悪く書いていたので、今回本腰入れて調べてみたら↓の記事がみつかった。

JavaScript の無名関数の中のthisはグローバルオブジェクトである Windowを指すのです。

Loading...

あーそうなのか。
感覚的にthisはその無名関数自体を指しているような気がしてたので、それ以上調べなかったですよ。
で、解決策としては、結局自分がやっていたように変数に入れるのがいいらしいんだけど、フィールド？を入れるのではなくて、this自体を格納するのが定石らしい。（その際の変数名はthat）

var obj = function (hoge){
  this.hoge = hoge;
};
obj.prototype.test = function() {

  // アクセス可能  
  console.log(this.hoge);

  // thisをthatに格納
  var that = this;
  var func = function () {
    // thatはobj自体を参照してくれる
    console.log("that : " + that);
    
    // that.hoge でアクセス可能
    console.log("that.hoge : " + that.hoge);
  };
  func();
};
var instance = new obj("message");
instance.test();

蛇足

Javascriptは各要素の呼び方がよくわからない。
意味はわかっているつもりなんだけど、オブジェクト？フィールド？プロパティ？メソッド？
そもそも、Javscriptをオブジェクト指向的に使っているだけで、Javascript自体はオブジェクト指向言語ではなかったはず。
オブジェクトとして使っている関数にprototypeで関数付けたらメソッド的に使えるというだけであって、Javascript自体がメソッドという名前で呼んでいる訳ではない。なので、色々呼び方があるのかなという風に理解しています。
あってるのかな？ｗ