「メソッド呼び出しにおけるthis」の実行結果について

[s-myk]

該当ページ

• 関数とthis > メソッド呼び出しにおけるthis
  https://jsprimer.net/basic/function-this/#method-this

質問内容

以下のコードを実行すると、objではなく、
{ method1: [Function: method1], method2: [Function: method2] }といった文字列が表示されました。
これは意図されている結果でしょうか。
(今回のthisがobjを指していることは分かるのですが、どうしてこういった実行結果になるのかが分かりません。)

const obj = {
    // 関数式をプロパティの値にしたメソッド
    method1: function() {
        return this;
    },
    // 短縮記法で定義したメソッド
    method2() {
        return this;
    }
};
// メソッド呼び出しの場合、それぞれの`this`はベースオブジェクト(`obj`)を参照する
// メソッド呼び出しの`.`の左にあるオブジェクトがベースオブジェクト
console.log(obj.method1()); // => obj
console.log(obj.method2()); // => obj

実行結果

{ method1: [Function: method1], method2: [Function: method2] }
{ method1: [Function: method1], method2: [Function: method2] }

[azu]

コンソール上の上は obj の中身を表示してしまうからですね。

console.log(obj.method1()); // => obj

が意味しているのは

obj.method1() === obj

ということですね。

{ method1: [Function: method1], method2: [Function: method2] }

は obj の中身がダンプされて表示されています。
なので obj.method1() の実行結果は obj という意味になりますね。

仕組み/仕様?的な話をすると、
JavaScriptのオブジェクトそのものには関数と違って名前(nameのプロパティ)がありません。(自分で追加することは可能ですが、自動では名前はつかない。あと仕様的には内部的なプロパティとして同じ値を関数オブジェクトは持っているはず)

例えば関数は function 文だと名前が必須なのもあって、関数オブジェクト自体に name プロパティが自動で追加されるという仕組みがあります

そのため、関数オブジェクト自体をコンソールに出してみると、コンソールも名前をnameプロパティから参照できるので、わかりやすさのために表示しているんだと思います。
(どう出すかはJavaScriptの仕様じゃなくてブラウザとかのコンソールの実装ですね)

上ででている [Function: method1] とかもこのnameプロパティを元にだしています。

function a (){}

console.log(a.name); // => "a"

Arrow Functionとか関数式はちょっと特殊なことになっていて、自動的に変数の名前をfn.nameというプロパティで参照できるようになっています。
なので、Arrow Functionとかもコンソールで出力してみると名前がでてくると思います。

const fn = () => {}
console.log(fn.name); // => fn
console.log(fn); // function fn()

ただのオブジェクトはこのような name プロパティみたいなものはないので、オブジェクト自体(obj が参照する先のオブジェクトそのもの) から obj という変数の名前を取得する方法がありません。
そのため、ブラウザのコンソールもオブジェクトの中身をダンプするしかないんじゃないかなーと思います。なので obj という名前がコンソールには表示されていないという感じですね。

[s-myk]

ご回答をありがとうございました。

typeofのように単純な文字列が返ってくることを想定していたのですが、今回の結果こそが(実装ごとの差はあれ)正確にobjを表しているといううことが分かり、納得しました。
プロパティやメソッドの増減で、どのように結果が変わってくるのか試してみたいと思います。