《JavaScript》スコープチェーンとは | 初心者向けに解説

JavaScript

スコープチェーンとは

callオブジェクト

関数を実行した時に生成されるオブジェクトです。callオブジェクトはActivation Objectとも言われます。例えば次のコードですとinnerFuncでまず1つのcallオブジェクトが生成されて、そしてそれを覆うようにouterFuncのcallオブジェクトが生成されます。

スコープチェーンはcallオブジェクトの繫り

callオブジェクトとグローバルオブジェクトの繋がりをチェーンスコープと言います。グローバルオブジェクトはJavaScriptを実行した時にできる全てのメソッドを包むオブジェクトのことを指します。スコープチェーンを理解すると、変数が参照する値がより明確になります。

スコープチェーンで変数の参照関係を理解

内側から外側のcallオブジェクトに向かう

変数はまず初めに自身のスコープ内で値が代入されているかどうかを確認します。代入されていればその値を参照し、どこからも代入されてなければ1つ上のcallオブジェクトを参照して、値の参照先を調べ続けます。そして参照先が見つからない場合は最終的にグローバルオブジェクトまで到達します。グローバルオブジェクトにも参照先がない場合、undefinedを返します。次のプログラムをみるとこの仕組みがわかると思います。

console.logでglobalを出力する時に、その参照先は「innerFuncのcallオブジェクト→innerFuncのcallオブジェクト→グローバルオブジェクト」の順番で検索されます。今回ですとinnerFuncのcallオブジェクトでglobalに代入が行われているので、この部分の処理を結果を参照します。hoge変数は「innerFuncのcallオブジェクト→innerFuncのcallオブジェクト→グローバルオブジェクト」の何処でも代入・定義されていないのでundefinedを返しています。

番外:その他おすすめの記事

開発がもっと快適に、楽しくなるアイテムを紹介します。アイテム1つで開発の楽しさが全然変わるので、良いアイテムにはじゃんじゃんお金を投資すると良いですよ。

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムです。

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがります。

おすすめアイテム③

PCスタンド、magic keyboard、magic mouseを購入してから、開発効率があがり、身体的負担が減って快適に開発ができるようになりました。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。初心者には最低限読んでおいて欲しい技術本をまとめました。例えば「リーダブルコード」などは技術力の高いエンジニアなら必ず過去に読んでいる本だと思います。

時短アイテム!日々の生活の質を上げる

日常生活における無駄を省く表品をまとめました。1日無駄な作業時間が10分発生するとしたら1年間で3600時間もその無駄な作業に時間を費やすことになります。このような魔の作業を消し去ってくれる商品をまとめました。。

気軽にお声かけください

このような形でほぼ毎日、情報発信を行ってます。技術的な部分で誤っている点などもあるかもしれません。その様な部分を発見した方はTwitterのDMなどで知らせていただければ凄い嬉しいです。また自身自身のエンジニアのネットワークを広げたいと思ってます。日頃六本木や渋谷にいることが多いですので気軽にお誘いください。情報交換しましょう。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございました。Twitterもやってるのでフォローしてくれたら嬉しいです!

タイトルとURLをコピーしました