JavaScript勉強会

JavaScriptの学習日記

ホストオブジェクト 【開眼!JavaScript】

JavaScriptの学習メモ。

今日は「開眼!JavaScript」の第2章を読んでみます。

 

jsstudy.hatenablog.com

 

 

2.9 ホストオブジェクト

JavaScriptのオブジェクトについて、

  1. ネイティブオブジェクト
  2. ホストオブジェクト
  3. グローバルオブジェクト

という用語が出てきます。

 

(p.47)

WebブラウザなどのJavaScript実行環境は「ホストオブジェクト」と呼ばれる複数のオブジェクトを持っています。

 

たとえば、Webブラウザ環境では、windowオブジェクトと、windowオブジェクトに保持されているすべてのオブジェクト(ECMAScript標準によって定義され、JavaScript言語が提供しているネイティブオブジェクトを除く)がホストオブジェクトとみなされます。

 

当然ながら、ホストオブジェクトの種類やそれぞれの動作については実装環境に依存します。

 

ネイティブオブジェクト

JavaScriptには必ず用意されている基本的なオブジェクト。

ECMAScript」の規格として定められています。

 

ホストオブジェクト

ネイティブオブジェクト以外のオブジェクトで、JavaScriptの実行環境によって用意されている様々なオブジェクト。

実行環境が違うと、ホストオブジェクトの品揃えも違ってきます。

 

グローバルオブジェクト

ネイティブオブジェクトやホストオブジェクトを含む、全てのオブジェクトの親玉がグローバルオブジェクトです。

ネイティブオブジェクト+ホストオブジェクト=グローバルオブジェクト

という包含関係になっています。

 

f:id:jsstudy:20170709154556p:plain

 

windowオブジェクトのプロパティを列挙

Webブラウザーのホストオブジェクトは、「windowオブジェクト」です。

windowオブジェクトの中身は、どうなっているのでしょうか?

 

(p.48)

http://jsfiddle.net/jseja/KJcPt/

for (x in window) {
    console.log(x); // windowオブジェクトのすべてのプロパティを列挙
}

 

上記コードをVisual Studio Code+Node.jsで実行すると、以下の結果が出ました。

f:id:jsstudy:20170709170235p:plain

例外が発生しました: Error
ReferenceError: window is not defined at Object.<anonymous>

 

Node.jsのホストオブジェクトには、windowオブジェクトがありませんでした。

 

(参考)

Node.jsのJavaScriptはどういうコンテキストで動く? | KIIDAX

Node.jsではwindowは存在しない。

 

Node.jsではなく、Chromeで実行してwindowオブジェクトを見てみます。

<!DOCTYPE html><html><body><script>

for (x in window) {
    console.log(x); // windowオブジェクトのすべてのプロパティを列挙
}

</script></body></html>

 

上記HTMLファイルをChromeで開き、コンソール画面で見ると以下の結果が出ました。

f:id:jsstudy:20170709173947p:plain

 

Chromeのwindowオブジェクトには、いろんなプロパティが用意されていました。

 

この例で出力されたものがホストオブジェクトです。

JavaScriptのネイティブオブジェクトが列挙されていませんが、ブラウザは一般的にホストオブジェクトとネイティブオブジェクトを区別します。

Webブラウザのホストオブジェクトで一番有名なものはHTMLドキュメントとのインターフェイスであるDOMです。

 

window.documentオブジェクトのプロパティを列挙

(p.48)

次の例をWebブラウザで実行すると、ブラウザで提供されているwindow.documentオブジェクトのプロパティを列挙します。

 

http://jsfiddle.net/jseja/s6vBV/

<!DOCTYPE html><html><body><script>

for (x in window.document) {
    console.log(x);
}

</script></body></html>

 

上記HTMLファイルをChromeで開き、コンソール画面で見ると以下の結果が出ました。

f:id:jsstudy:20170709175839p:plain

 

Chromeのwindowオブジェクトの中にあるdocumentオブジェクトの中には、いろんなプロパティがありました。

 

ここで理解してほしいのは、JavaScript言語仕様とホストオブジェクトの間には何も関係がないということです。

JavaScript「言語」が提供するものJavaScript 1.5、ECMA-262 Edition 3や、MozillaのJavaScript1.6、1.7、1.8、1.8.1、1.8.5など)と、ホスト環境が用意するものは別のものなので、これらを混同してはいけません。

 

Node.jsのホストオブジェクト

WebブラウザーとNode.jsのホストオブジェクトは違います。

Node.jsには、どんなホストオブジェクトが用意されているのでしょうか?

 

JavaScriptのグローバルオブジェクトを調べる方法

qiita.com

 

Functionコンストラクタ

var global = new Function("return this")();

//newは省略可
var global = Function("return this")();

Functionコンストラクタは現在使われている主要なすべての環境で使えるし、スコープ非依存でstrict modeの影響も受けない。というわけで、個人的にFunction("return this")()をよく使っている。

 

上記のサンプルコードを参考にして、Node.jsのグローバルオブジェクトにアクセスして、ホストオブジェクトを見てみましょう!

 

var global = Function("return this")();
console.log(global);

 

上記コードをVisual Studio Code+Node.jsで実行すると、以下の結果が出ました。

f:id:jsstudy:20170709191001p:plain

 

何かたくさん出てきたけど、よく分からないのでググってみました★

→ ググっても、結局よく分かりませんでしたwww

 

詳細は不明ですが、Node.jsにはいろんなホストオブジェクトが用意されてるようです。

 

ホスト環境とは?

[NOTE]

JavaScriptが動作するホスト環境(Webブラウザなど)は、「グローバルオブジェクト」を用意しています。

このオブジェクトにはJavaScriptのネイティブの言語環境といくつかのホストオブジェクト(Webブラウザのwindow.locationなど)と、ユーザ定義オブジェクトが保持されています。

 

JavaScriptのオブジェクトをざっくり分類する(シリーズその2) - Qiita

hostオブジェクト

host(ホスト)という言葉は、例えば「ホームパーティーのホスト」のように使われる「場所を提供する」という意味合いがある。

host環境の中でJavaScriptは実行するコンテクストを得る。

ブラウザがホストに該当する。

 

JavaScriptのホスト環境」とは、実行環境のことですね?

 

「ホスト」の意味

プログラミングの用語は英語だらけ!>< (→ 単語の意味を再確認w)

 

nativeの意味 - 英和辞典 Weblio辞書

出生地の、自国の、本来の、その国に生まれた、その土地固有の、土着の、(…の)原産で、土産(どさん)で、生まれつきの、生来の

 

hostの意味 - 英和辞典 Weblio辞書

(客をもてなす)主人(役)、ホスト(役)、(大会などの)主催者、当番役、(旅館などの)亭主、(寄生動物の)宿主

 

globalの意味 - 英和辞典 Weblio辞書

地球全体の、世界的な、グローバルな、全体的な、包括的な、球状の、球形の

 

無理矢理日本語に置き換えたら、

  • ネイティブオブジェクト → 自前の物 
  • ホストオブジェクト   → 提供された物
  • グローバルオブジェクト → 全体の物

…みたいなかんじ?(日本語でOK)

 

ホストオブジェクトは外部ライブラリー?

「ホストオブジェクト」という命名について、素朴な疑問。

JavaScriptは、

  • ネイティブオブジェクトがメイン(全ての実行環境で共通)
  • ホストオブジェクトがサブ(実行環境ごとに違う)

なら、ホストオブジェクトは「外部ライブラリー」なのでしょうか?

 

teratail.com

 

javascriptにおけるホストオブジェクトは、外部ライブラリ、つまり部外者が特定のファイルを拡張するもので、尚且つ取り換えできてこれが無くても問題なく動作するものと認識しております。

もし上記があっているならば、なぜ外部ライブラリという名称を使わずにホストオブジェクトと呼称するのでしょうか。

 

ECMAScriptは、ホスト環境内で計算を行ったり、オブジェクトを操作したりするためのオブジェクト指向言語である。(中略)

スクリプティング言語とは、既存のシステムの機能を操作、カスタマイズ、自動化するために使用されるプログラミング言語のことである。

 

ということで、C言語などのようなプログラミング言語と違ってマシンの上で直接動くのではなく、ブラウザなど何かしらの環境の中で動くのが前提となっていて、この「何かしら」に当たるのがホスト環境です。 

 

JavaScriptは、C言語のようなコンパイル言語ではなく、ブラウザーなどのホスト環境で動くインタープリター言語として主に使われています。

ホスト環境ごとに、柔軟に仕様を拡張できる長所を強調するため、「外部ライブラリー」じゃなくて「ホストオブジェクト」という名前で呼んでいるのでしょうか?

 

実質的な意味としては、「ホストオブジェクト」は「外部ライブラリー」と同じだと思いました。

→ネイティブオブジェクトは同じままだけど、ホストオブジェクトは環境ごとに交換可能なパワーアップアイテムみたいなもの?

 

いろいろなホストオブジェクト

JavaScriptが動く環境(ホスト環境)は、いろいろあります。

 

まとめ

JavaScriptが広く普及して、いろんなところで動くようになりました。

  • JavaScriptの実行環境(ホスト環境)ごとに、用意されているホストオブジェクトが違うので、違いに注意!?
  • (例)Webブラウザーには「windowオブジェクト」があるけど、Node.jsには「windowオブジェクト」がない等。

 

JavaScriptの勉強は、

  1. 最初に、ネイティブオブジェクト(全てのホスト環境で共通)
  2. 次に、ホストオブジェクト(ホスト環境ごとに違う)

の順番で練習すれば良いでしょうか?

 

 

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質