【りあクト！１】JavaScriptの鬼門、this②
タグ：
JavaScript
子供を抱っこしようとしたら軽いギックリ腰になりました。運動不足よくない。
thisの中身４つのパターン
（１）new演算子をつけて呼び出したとき：新規に生成されるオブジェクト
JavaScriptのnew演算子はあらゆる関数につけて実行することができる。 実行時、関数のprototypeオブジェクトをコピーして新規にオブジェクトを作り、次にそれを関数に暗黙の引数thisとして渡す。 最後に、その関数がreturn this で終わっていない場合は、それを実行してくれる。
> const dump = function(){ console.log('`this` is', this ); }; > const obj = new dump(); `this is` dump{} >obj dump{} >dump.prototype dump{} >obj !== dump.prototype true
(2)メソッドとして実行されたとき：その所属するオブジェクト
メソッドとして実行された場合、そのアクセス演算子.の前のオブジェクトがthisとして渡される。 この場合はthisを呼び出すメソッドdump()の前についている.(ドット)の前のfooオブジェクトがthisとして渡される。
const foo = { name: 'Foo Object', dump(){ console.log(this); }, }; foo.dump(); //{ name: 'Foo Object', dump: [Function: dump]}
(3)1.2以外の関数[非strictモード]:グローバルオブジェクト
Node.jsではglobalオブジェクト、ブラウザではWindowオブジェクトを参照する
(4)1.2以外の関数[strictモード]:undefined
(3)の方式はグローバルスコープが汚染される可能性があるので、strictモードでは利用できなくなっている
thisが問題を引き起こすとき
.（ドット）なしでthisを含む関数を呼び出すと、(2)のオブジェクトを呼び出しではなく(4)のundefinedになる
結局どうすれば良いのか
thisはクラス構文内でしか使わない
クラス構文内では、メソッドを含めたあらゆる関数の定義をアロー関数式で行う
それはそうと、この本の登場人物の方々が
「ここまで見てきた私たちには、なぜエラーが起こるかは理解できるよね。」
「これまでの話を踏まえるとそうなりますよね」
とか言ってて理解力高過ぎて泣ける。
とてもわかりやすかったQiita記事
JavaScript の this を理解する多分一番分かりやすい説明
