JavaScript: this
概略
JavaScript では連想配列内の変数や関数に this でアクセスすることもできます。 ただし、関数内で this が何を指してるかに注意が必要です。
class 内で this を使用する場合でも class のオブジェクトを使う側がメソッドなどを呼び出すときに this が何を指しているかを気にする話が出てきます。 プログラムの書き方がまずいと this の指してるオブジェクトが異なることに起因する 1) 関数や変数や見つからないエラーが発生したり、 2) 関係ないオブジェクトにプロパティを付けたりするトラブルが起こります。 この話は Java や C# などで this に慣れている人々でも注意が必要です。
イベント処理などで class のメソッドを呼ぶときは、 アロー関数 で書くと上の話のようなトラブルを気にしなくて済むようになります。
連想配列の中では this を使わない方が良いです
JavaScript では連想配列の中でも一応 this が使えます。
// class を使わず object = {} で書いた場合は static class に相当すると // 考えてください。 const App = { property1 : "プロパティ1", //クラス変数、static フィールド相当。 method1(){ // static class 風にアクセスする場合 (Java, C# などと一緒)。 let valueA = App.property1; // JavaScript では一応 this も使えます。 // Java や C# の static class にはない JavaScript 特有の話です。 let valueB = this.property1; } }
ただし、使用する場面によっては this が何を指しているかを気にする話が出てくるので、 this は class 内以外の場所では使わない方が良いです。
- TestJS_this_object01.html
連想配列に関数を付け、this でアクセスするサンプル。
Java や C# 向けの人の話 (2024/01)
Java や C# に慣れている人でも JavaScript の this は意味が違うので注意してください。Java や C# と同じ感覚で使うと泥沼にはまることがあります。 特に古い JavaScript の書き方でプログラムを書くときには注意が必要です。
JavaScript では this の指すオブジェクトが メソッドが呼び出されたときの状況 (コンテキスト) によって変わります。 this で自分自身の class のオブジェクトを指しているつもりでも、 実際は別のオブジェクトを指している場合があります。 このようなときにメソッドが見つからないエラーなどのトラブルが発生します。
// Java や C# などの暗黙の了解では「this は MyClass のオブジェクトを // 指しています」。JavaScript では this が他のオブジェクトを指している // ことも起こります。 class MyClass { method1(){ //MyClass のオブジェクトの他のメソッドを実行するつもり。 this.method2(); //MyClass のオブジェクトのプロパティにアクセスするつもり。 this.property1 = "値" } method2(){ } }
- Java や C# などでは「this は MyClass のオブジェクトを指している」 という暗黙の前提で this を使用しています。
- JavaScript では method1() を呼び出す方法がまずいと this が MyClass のオブジェクト以外の別のオブジェクト (例: window) など を指している場合があります。別のオブジェクトを指している場合は this.method2() では関数 (メソッド) が見つからないエラーが発生し、 this.property1 は関係ないオブジェクトに勝手にプロパティを追加する話になります。
- TestJS_this_class_arrow01.html
span タグにクリックイベントを付けるサンプル。
this の指す内容に注意、bind() のサンプル
イベント処理のコールバックを昔の書き方で書くときに記述の仕方がまずいと
2) のようなトラブルがよく起こります。
アロー関数で書くとこういったトラブルがなくなり、this
を気にしなくて済むようになります。この話は
「アロー関数は this を束縛しない」 といった説明で出てきます。
「アロー関数は this を束縛しない」