一つ手前の階層のthisを取得する関数はあるのかどうか。

Question

前提・実現したいこと

少しに気になったので質問させていただきます。
以下のソースコードはもちろんthisの内容が変わっているのでエラーが発生しますが、
thisの一個手前の階層のthisを取得する便利な関数はあるのでしょうか？

発生している問題・エラーメッセージ

Error: Cannot read property 'a' of undefined

該当のソースコード

class HogeHoge {
	constructor() {
		this.a = 10;
		this.b();
	}
	b() {
		function a() {
			console.log(this.a);
		}
		a();
	}
}
var dummy = new HogeHoge();

Answer 1

以下のソースコードはもちろんthisの内容が変わっているのでエラーが発生しますが、

thisの一個手前の階層のthisを取得する便利な関数はあるのでしょうか？

質問通りに回答するとなれば可能です。
Function.prototype.bindを使えば関数に対してthisを束縛することが可能です。

---

しかしthisの束縛はオススメしません。

JavaScript Ninjaの極意という書籍で、
thisは文脈により4通りの挙動を示すと解説されています。
その条件は複雑怪奇でとてもじゃないけど使いこなせる気はしません。

なのでES2015以降の流れでアロー関数が実装され、
thisの管理を気にする場面はほぼ全て消え去りました。

class HogeHoge {
    constructor() {
        this.a = 10;
        this.b();
    }
    b() {
        const a = () => {
            console.log(this.a);
        }
        a();
    }
}
var dummy = new HogeHoge();

こうしておけばclass構文内のメソッド内に於いて、
いくら関数をネストしても常にthisはnewで作ったインスタンスに向くようになります。

---

イマドキのJavaScriptの書き方2018は私が強く共感している記事です。
その「関数」や「thisを操作するコードは書かない」等のセクションで
アロー関数を利用してthisを避ける事を説いています。

functionキーワードはもう捨てましょう！functionキーワードのthisの取り扱いはトラブルの元です。もう存在しなかったものとして歴史の闇に葬ります。次の書き方は古いfunctionキーワードを使っています。こういう説明を見かけたらゴミ箱にダンクシュートします。

// 古い関数定義
function name(引数) {
     本体
}

今時はアロー関数を使って書いていきます。特に、今時の書き方は、JavaScriptでよく扱う、無名関数との相性が非常に高くなっています。

// 今時の関数定義
const name = (引数) => {
    本体
};

Comments

[AkitoshiManabe]

仰るように、this はIEサポート必須時代の「古典」になっていますね。
Qiita「JavaScriptにおけるthisの挙動まとめ」（2016年11月の記事）
https://qiita.com/knknkn1162/items/0fa7dcb6a735125d21db

[退会済みユーザー]

今時の関数定義が私の知ってるものと全然違いますね。
書き方は人それぞれでいいとして、何だか私が置いてかれているような感じでした。
回答ありがとうございます。

Answer 2

Function.prototype.bind() はどうでしょうか。

let oj = {
  a: "hoge"
};

class HogeHoge {
    constructor() {
        this.a = 10;
        this.b();
    }
    b() {
        function a() {
            console.log(this.a);
        };
        a.bind(this)(); // HogeHogeオブジェクトの this を aに適用
        // アロー関数ではなく、古典的な関数宣言なので "hoge" を出力できる。
        a.bind( oj )();
    }
}
var dummy = new HogeHoge();

Comments

[退会済みユーザー]

回答ありがとうございます。
bindの手がありましたか、この方法ならいちいち変数を宣言しなくて済みますね。
ベストアンサーにしました。ありがとうございます。

[hoshi-takanori]

余計なお世話ですが、bind だと新しい関数オブジェクトが作られるので、その場で呼ぶだけなら call でも良い気がします。
a.call(this);
a.call(oj);
https://qiita.com/hosomichi/items/155af03120a330fd4437

[退会済みユーザー]

bind、call...少しややこしいですのでマスターする必要がありますね。
ありがとうございます。

Answer 3

よくあるのは変数thatやselfに目的のthisを束縛しちゃうってやり方ですね。

class HogeHoge {
    constructor() {
        this.a = 10;
        this.b();
    }
    b() {
        const that = this;
        function a() {
            console.log(that.a);
        }
        a();
    }
}
var dummy = new HogeHoge();

FYI:
https://havelog.ayumusato.com/develop/javascript/e570-js_this_context.html

Comments

[退会済みユーザー]

回答ありがとうございます。
この方法は以前に使っていたのですが、何か他の方法はないのでしょうか？