JavaScriptのwindowについてのメモ

Published: 2016年3月11日 by tomsato

概要

JavaScriptを読むにあたってwindowってなんなのかつまったのでまとめておく
当たり前のことなのかもしれないけどわからなかったのでまとめておく

JavaScript勉強シリーズ

windowについて

windowとは

JavaScriptをブラウザで使用する場合、最初からwindowというグローバルオブジェクトが提供されている
このwindowにはブラウザのウインドウに関するものがまとまっている

// google chromeのDeveloper ToolsのConsoleを開いた状態で以下のコマンドを実行すると
// 自分では宣言していないwindowオブジェクトが存在していることがわかる

console.log(typeof window)      // object
console.log(window.outerWidth)  // 1920

windowのプロパティ例

プロパティ 説明
name ウィンドウの名前を設定
screenX ウィンドウのx軸方向の位置
screenY ウィンドウのy軸方向の位置
outerWidth ウィンドウの幅
outerHeight ウィンドウの高さ

グローバル変数を用意した場合windowオブジェクトのプロパティとしてアクセスが可能になる

var x = 15; console.log(x)   // 15 
console.log(window.x)        // 15 
console.log(x === window.x); // true

windowの表記を省略することも可能
windowはグローバルオブジェクトのプロパティでありグローバルオブジェクトの参照を持つ
自己参照であるため以下のような振る舞いを起こす

// chromeのdeveloper toolsのConsole上で確認することができる
window === window.window        //true
window === window.window.window //true
window === this                 //true
window === window.self          //true

これは実質的に以下のように書いた物と同等で

var global = this;
print('global' in this); // true

グローバル変数globalはグローバルオブジェクトを参照するthisを参照しているため
globalはグローバルオブジェクトのプロパティであると同時にグローバルオブジェクトの参照を持つ自己参照である

参考

コメントを書く

※ 個別に返信が必要な時のみご記入ください

※ Emailは公開されません

※ 承認されると名前・コメントが下記に表示されます

コメント一覧

最近の投稿

ビジュアルリグレッションテストについてまとめ、ネットで調べると数多くのライブラリがありどれがどんな立ち位置なのか全体像がわかりずらかったのでどんな種類があるのか入門の入門としてまとめます、またPlaywrightを使って実際に触ってみました

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

カテゴリ一覧

タグ一覧