LoginSignup
0
0

More than 3 years have passed since last update.

グローバルなとこで使うthisはまじでグローバル

Last updated at Posted at 2020-06-20

はー!!そうなのね!

開眼!javascriptを読んでて
はー!!そうなのね!
と、グローバルなthisについて知ったことがあり、書きますその1。
(※from 6章の6.3より。)

thisレベル(thisに対する自分の理解感覚値)

関数とかの中でthis出てきたら「これ」の意味通り、その関数自体を指し示している、、、くらいの知識を持っていて、よくわかんなくなってもconsole.log()で中身見ればいいやくらいの理解度でした。
あとアロー関数の書き方くらいはわかるくらいの感じです!

グローバルなとこで使うthisはまじでグローバル

どういうことか?というと、、

例えば関数とか変数とかなんもしてないとこでthisを出力してみる。
他に何もスクリプト書いてない状態でconsole.log(this)ってやってみるということです。
なんも決まってない世界のthisってなんぞや?ってなりますよね。自分はなってました。

どうなるかというと「ここ」、ってなことで世界全体を指し示します。
つまり(?)windowです。ブラウザの一番上の要素。

test.js
console.log(this);

//結果
//Window
//<default properties>
//<prototype>: WindowPrototype { … }
//.......


公式ドキュメントでは、

Window インターフェイスは、 DOM 文書を収めるウィンドウを表します。

ということで、一番上の世界です。
太郎くんの家に行って「ここ」といえば太郎くんちの情報になりますけど、
誰の家でもない場所で「ここ」といえばどこでもないこの世界全体を指し示すということになります。

なので、この同じ世界で
var pan = "choko";
とかしてこの世界にパンの変数を作ってあげる(グローバル変数)と、
log見るとちゃんと追加されてこうなります。

test.js

var pan = "choko";
console.log(this);

//結果
//Window​
//pan: "choko" これが追加された!
//<default properties>
//<prototype>: WindowPrototype { … }

はーなるほど!
グローバル変数とかグローバルではない変数はしっていたけど、thisにおいても同じような考え方ができるんだなと思いました。

0
0
0

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
0
0