Written by Kasumi

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が渡らない時の対処方法について紹介しました。

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

目次

関連記事

JavaScript

【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

2023.01.02
394
JavaScript

IEブラウザか、その他以外のブラウザかを判定し、条件分岐・判別する方法【Javascript】

更新日:2022.09.09
470
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
828
JavaScript

JavaScriptで上下のスクロールを判定する方法

2022.10.15
421