thisの値とコンソールの見方が分かりません。

Question

1. 最初のthisはobjを二番目のthisはcatを指し示していると思うのですが、合ってますでしょうか。
2. コンソールにはどちらも「Object」とその定義しか表示されません。具体的にオブジェクトの参照が

　 格納されている変数を表示する方法はありますでしょうか。

よろしくお願い致します。

var obj = {
  hoge: function() {
    console.log(this);
  }
}

obj.hoge(); // 結果 Object { hoge: hoge()}


var cat = {
  name: "ラム",
  func: function(){
    return this;
  }
};

console.log(cat.func()); // 結果 Object { name: "ラム", func: func()}

Comments

[m.ts10806]

現状の定義だと変数は持ってませんね

[Lhankor_Mhy]

「格納されている変数」ということであれば、難しいと思います。
同じオブジェクトを複数の変数に代入することも可能なので。

[taka_oct092018]

m.ts10806様、Lhankor_Mhy様

返信ありがとうございます。
そうですか２の質問に無理があったということが分かりました。

[think49]

「変数を表示」して何を実現したいのでしょうか。

[taka_oct092018]

think49様
thisが何を指し示しているか確認したいです。

[think49]

> thisが何を指し示しているか確認したいです。

thisは変数ではありません。
質問の意図が回答者に正しく伝わっていないように思われます。

全体的なコメントの流れから「2.」は「1.」を確認する為に「thisが指し示しているもの」を確認したい、と解釈しました。
具体的には、「thisが指し示しているもの」と「変数が指し示しているもの」の等価性を確認すれば、目的を達成できると考えました。

「変数を表示」という文は抽象的であり、「変数の何を表示するのか」「変数名も含めて表示するのか」等が具体化されていません。
初心者故に言葉の選択が難しいのだと思いますが、質問の「目的」を詳しく書くようにすると、質問の意図が正しく伝わりやすいと思います。

[Zuishin]

> 具体的にオブジェクトの参照が格納されている変数を表示する方法はありますでしょうか。

変数を一つ一つ確認していくくらいしかないでしょう。
cat === cat.func()

目的によってはループや Map が役立つと思います。
「何のために変数を確認したいのか」を追記すれば、より具体的な回答がつく可能性があります。
言うまでもないことですが、「何のために」は「〇〇のため」と一言で表すのではなく、相手に伝わるよう言葉を尽くす必要があります。

[taka_oct092018]

think49様・ Zuishin様

返信ありがとうございます。
知識と言葉が不足しており分かりにくい質問になってしまいました。
今後はもう少し言葉を吟味して投稿します。

Answer 1

最初のthisはobjを二番目のthisはcatを指し示していると思うのですが、合ってますでしょうか。

考え方が間違っています。このコード内にある2つのthisは、呼び出し方によって何を指すかが変わるものです。

Comments

[taka_oct092018]

maisumakun様
いつもお世話になっております。

言葉足らずで質問のしかたが良くなかったかもしれません。
このコードのthisの呼び出され方において最初のthisはobjで、
2回めのthisはcatを指していると思うのですが、
間違っているのでしょうか。

[maisumakun]

えっ、それを聞きたかったのですか？

[taka_oct092018]

はい、そうです。

[maisumakun]

> このコードのthisの呼び出され方において最初のthisはobjで、
2回めのthisはcatを指していると思うのですが

（すでに別の方もコメントしていますが）これも誤りです。thisも変数も、あくまで指す対象は「オブジェクト」であって、「thisが変数を指す」事はありません。

[taka_oct092018]

了解しました。
最初のthisはobjオブジェクトを2回目のthisはcatオブジェクトを示している、
ということでしょうか。

Answer 2

breakpoint

変数の情報をまとめて取得するには、breakpointを使用してください。

• Pause your code with breakpoints - Chrome Developers
• Chrome でのデバッグ - javascript.info

thisの参照値

thisが何を指し示しているか確認したいです。

「thisの参照値」は console.log() で出力されています。
「変数の参照値」と比較するには、=== を使用してください。

• 厳密等価 (===) - JavaScript | MDN

'use strict';
var obj = {
  hoge: function() {
    console.log(this === obj);
  }
}

var cat = {
  name: "ラム",
  func: function(){
    console.log(cat === this);
    return this;
  }
};

obj.hoge(); // true
cat.func(); // true

ただし、関数の呼び出し方を変えれば、this の参照値も変化します。

new obj.hoge(); // false
new cat.func(); // false

obj.hoge.call(1); // false
cat.func.call(1); // false

参照値が示すものを確認する方法は複数あるので、工夫してください。

• typeof 演算子で型を確認
• Object.getPrototypeOf() で [[Prototype]] を確認
• console.dir() でObject型の値の情報をまとめて確認
• console.trace() でスタックとレースを確認

Re: taka_oct092018 さん

Comments

[think49]

@taka_oct092018さん
[修正依頼] に書いたコメントも確認して下さい。
本回答が質問の意図にそぐわない場合は、「達成目標」と「質問の詳細」を追記下さい。

[taka_oct092018]

think49様
詳細かつ具体的なコードを教えていただきありがとうございます。
「console.log(this === obj);」を使えばいいのですね。
よく分かりました。