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

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

ある機能を実装し終わっていざ動かしてみると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)になるようです

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

コメント

このブログの人気の投稿

投稿時間:2021-04-30 23:37:32 RSSフィード2021-04-30 23:00 分まとめ(42件)

投稿時間:2021-07-31 23:31:38 RSSフィード2021-07-31 23:00 分まとめ(32件)

投稿時間:2023-02-05 02:09:04 RSSフィード2023-02-05 02:00 分まとめ(9件)