[JS] functionで定義した関数とアロー関数でthisの扱いは異なる

javascript

typescript

投稿日: 2024/08/04

更新日: 2024/08/19

functionで定義した関数とアロー関数ではthisの動作が異なります。

「functionで定義した関数」が呼び出されるとき、その this は呼び出し元に依存します。例えば、イベントリスナー内で this を使用すると、通常はイベントが発生した要素や、グローバルオブジェクト（ブラウザ環境では window）を指します。

アロー関数は、this のスコープをその外側のスコープから継承します。アロー関数内の this は、アロー関数が定義された場所の this をそのまま使用します。これにより、アロー関数内で this の参照を変更せずに、外側の this を利用することができます。

コード例

以下のコードはProperty 'mousedownPosition' does not exist on type 'Window'.というエラーになります。
thisはWindowになっています。

export class ModelList extends THREE.Group {
  mousedownPosition: THREE.Vector2 | undefined

  constructor() {
    super()

    window.addEventListener("mousedown", function(event) {
      this.mousedownPosition = new THREE.Vector2(event.clientX, event.clientY)
    })

これを動作させようとすると以下のコードになります。アロー関数に変更すればthisはクラスオブジェクト自身になります。

export class ModelList extends THREE.Group {
  mousedownPosition: THREE.Vector2 | undefined

  constructor() {
    super()

    window.addEventListener("mousedown", (event) => {
      this.mousedownPosition = new THREE.Vector2(event.clientX, event.clientY)
    })

yosi

Noh を作ってるエンジニア。

コード例