【JavaScript】関数におけるthis

Question

関数におけるthisの挙動がよくわかりません。
メソッドやコンストラクタにおいては、pythonのselfと同じだという認識で問題ないのですが…。

(()=>{
  "use strict";

  let msg = "hello";
  function showMsg() {
    console.log(this);
    console.log(this.msg);
  };
  showMsg();

})();

この例においては、thisはwindow、this.msgは"hello"が格納されているかと思いました。
しかし実行すると、thisはundefinedとなり、this.msgはエラーとなります。

このあたり、thisの挙動の原理を共にお教えいただけると幸いです。
よろしくお願い致します。

Answer 1

下記のコードは strict モードではないため、また呼び出し時に this の値がセットされないため、this はデフォルトでグローバルオブジェクトとなり、それはブラウザーでは window です。

strict モードでは、this の値は実行コンテクストに入ったときに設定された値が残ります。なので、下記の場合は undefined が残ります。

this - JavaScript | MDN

ちなみに、そのコードですが、window.msgもundefinedです。
グローバルオブジェクトについて｜teratail

Comments

[moni]

なるほど、strictモードでない場合、thisには勝手にwindowが入るのですね

Answer 2

過去質問に幾度となく出てきているので参考にしてください。

teratail：「JavaScript this」の検索結果