質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1901閲覧

Javascriptのオブジェクトの中身

SugiuraY

総合スコア317

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/10/21 12:41

編集2017/10/21 12:42

本当に基礎的なことで申し訳ございませんが、一点ご質問させてください。
いつも初めてのオブジェクトを触るときには、マニュアルではピンとこない場合があるので、console.logで出力して、動作した場合どのようなプロパティ(メソッド)があるのかをざざっと見ております。

例えば下記のような場合、1ではonloadプロパティや諸々consoleで確認することができるのですが、2については<img>のタグらしきものしか返ってきません。JSON.stringify()では空のオブジェクトが返ってきます。

日本語のImageオブジェクトのマニュアルらしきものは見当たらないのですが、英語版で見つけ、様々なプロパティ(onload等も)があるにもかかわらず空しか返ってきません

英語版マニュアル

この両者は同じオブジェクトにもかかわらず、なぜ結果が異なるのでしょうか?
また、マニュアルに載っているようなプロパティが実際どう備わっているのかImageオブジェクトの中身を見たいのですが、見る方法はあるのでしょうか?

よろしくお願い申しあげます。

Javascript

1//1 2var reader = new FileReader(); 3console.log(reader); 4//2 5var img = new Image; 6console.log(img);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

下記のように参照できるかと思います。

javascript

1var img = new Image; 2console.log(img.__proto__);

追記:

console.log - Web API インターフェイス | MDN

console.logにオブジェクトを引数として指定すると、そのオブジェクトの文字列表現を出力します。
出力の差はtoStringの定義の違いかと思いましたが、定義からはそのような違いをすぐには見つけられませんでした。
おそらく、HTMLElementについてはHTML要素としての文字列表現を返すような実装となるようにブラウザ側で対応しているのではないかと思いますが、それがわかる資料は見つけられていません。


再追記:

Console Standard
https://console.spec.whatwg.org/#object-formats

An object with generic JavaScript object formatting is a potentially expandable representation of a generic JavaScript object. An object with optimally useful formatting is an implementation-specific, potentially-interactive representation of an object judged to be maximally useful and informative.

英語がよくわからないので詳細は不明ですが、意訳すると、なにかいい感じに出力するよ、と書いてあるように読みました。

Console Standard (日本語訳)
https://triple-underscore.github.io/console-ja.html#object-formats

日本語訳もあるようでしたが、やっぱりよくわかりませんでした。

投稿2017/10/21 12:48

編集2017/10/21 13:20
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2017/10/21 13:06

コメント有難うございます。ぶじ出力ができました!
SugiuraY

2017/10/21 14:00

いえ、ご丁寧に本当に有難うございます。ここからは、自力で見つけます。オブジェクトによって全く性格がことなる場合には、如何にしようか迷っていたのですが、あたりがついて、良かったです! 宜しくお願い申し上げます。
guest

0

console.dir() を使ってみてはいかがでしょうか。

JavaScript

1var img = new Image; 2console.dir(img);

Re: SugiuraY さん

投稿2017/10/21 12:53

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2017/10/21 13:14

コメント有難うございます。無事表示できたのですが、下記同様になぜ同じオブジェクトなのにlogの挙動が異なるのでしょうか?
guest

0

JavaScript

1var img = new Image; 2console.log(img); // Firefoxの開発者ツールならこれで出た<img>をクリックしたら出る。 3for ( prop in img ) { // 列挙してみた 4 console.log( prop ); 5}

追記:

なぜオブジェクトによって仕様が異なるのでしょうか?

詳しくはありませんが、ブラウザにとって特別な要素だからなのでしょう。あと多分、単一要素ではなく内包要素を持っている場合のための表示なのかもしれませんね。

【console.log - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Console/log#Difference_with_console.dir()

特に、console.log は DOM 要素の取り扱いに特化していますが、console.dir はそうではありません。これは、DOM JS オブジェクトの全容を表現しようとする場合に役立ちます。

投稿2017/10/21 12:51

編集2017/10/21 13:55
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2017/10/21 13:11

コメント有難うございます。 こちらの環境はchromeですが、確認ができました。 解決はしたのですが、なぜオブジェクトによって仕様が異なるのでしょうか?ブラウザ側の問題でしょうか?
SugiuraY

2017/10/21 14:02

有難うございます。あまり、意識せずにいつもlog出力していました。もう少し詳しく自分で勉強してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問