Posted at

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)になるようです

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