• JavaScript

JavaScriptで参照先オブジェクトからthisが渡らない時の対処方法

JavaScriptで参照先オブジェクトメソッドを変数に格納。

上記変数から関数を実行したが、thisがunderdefinedとなり参照できない。

thisを渡して関数を実行できるようにしたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

thisが渡らない原因

const message = {
  content: 'hello',
  Intro(name) {
    console.log(this.content + ' ' + name);
  }
}
const introduction = message.Intro;
introduction('kasumi');
introduction('taro');

//コンソール結果
undefined kasumi
undefined taro

thisが渡らないコード例です。

コンソールにhello name（引数）と出力するmessageオブジェクトのIntroメソッドがあります。

上記を使い回す為、変数に格納。

関数を実行したところ、Introメソッドのthis.contentプロパティが参照できず、undefinedになってしまいます。

thisが渡らない原因としてはintroduction変数のthis参照先がmessageオブジェクトではなく、グローバルオブジェクトになってるのが原因です。

bindメソッドを使ってthisを渡す

const message = {
    content: 'hello ',
    Intro(name) {
      console.log(this.content + name);
    }
}
const introduction = message.Intro.bind(message);
introduction('kasumi');
introduction('taro');

//コンソール結果
hello kasumi
hello taro

参照オブジェクトからthisを渡すコード例です。

bindメソッドを使います。

使い方は以下の通りです。

実行したいオブジェクト.bind(thisの参照先オブジェクト);

実行したいオブジェクトとbindメソッドを連結。

bindメソッドの引数にthisを参照したいオブジェクトを指定します。

以上で参照したいオブジェクトからthisを渡す事が出来るようになります。

まとめ

JavaScriptで参照先オブジェクトからthisが渡らない時の対処方法について紹介しました。

以上で解説を終わります。