2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでオブジェクトを分割代入してしまうとthis呼び出しできなくなる

Posted at

ある機能を実装し終わっていざ動かしてみるとthis呼び出しがundefinedになって原因がわからず、どうやっても動かないので1時間分の作業を初期化までしてようやくわかったので同じような過ちを起こさないように備忘録として残して起きます

まずオブジェクトのthis呼び出しですが、オブジェクトに関数があるとき、その関数の中からthisを使うと簡単に自身のプロパティにアクセスできるものです

const obj = {
  hoge: 1,
  fuga() {
    return this.hoge
  }
}

obj.fuga() // -> 1

fuga() {}といのはES5で新しく追加された簡略構文でfuga: function () {}と同等です
また、アロー関数はthisを束縛しないため使用できません
使えるのはメソッドだけでpiyo: this.hogeのようなことはできません
つまりゲッターを使えばget piyo() { return this.hoge }のようにできます

それで問題の分割代入ですが、

const obj = {
  hoge: 1,
  fuga() {
    return this.hoge
  }
}

obj.fuga() // -> 1

const { fuga } = obj

fuga()     // -> undefined

考えてみればそうなのかもしれないけど、知らないとなかなか気づけなさそうです...

ちなみにthisの中身はwindow(node.jsではglobal)になるようです

仕様の確認や検証が不十分なのでおかしいところがあれば指摘していただけると助かります...

2
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?