CodePen、[object Object] 、[object Window]とは？

Question

var sayHelloShared = function() {
console.log("Hello, I'm " + this.name);
};
var alice = {
sayHello: sayHelloShared,
name: 'Alice'
};
alice.sayHello();
sayHelloShared();

上記をchromeのconsoleで確認したところ、
Hello, I'm Alice
Hello, I'm CodePen
と出ました。
また、2行目の「this.name」を「this」にして同様に確認したところ、
Hello, I'm [object Object]
Hello, I'm [object Window]
と出ました。

javascriptにおいてthisは、当該関数のobjectを参照するはずですが、
・CodePen
・[object Object]
・[object Window]
は具体的に何を意味しているのでしょうか？

Answer 1

String 型への変換

"Hello, I'm " + this;

文字列リテラルと連結する事で this は String 型に変換されます。
この時、内部的には Object.prototype.toString が呼び出されます。

ES5.1 の Object.prototype.toString

ES5.1 の Object.prototype.toString は次の演算結果を返します。

'[object ' + [[Class]] + ']';  // ES5.1

内部プロパティ [[Class]] は読み取り専用であり、ユーザ定義する事は出来ません。

オブジェクト初期化子で宣言されたオブジェクトの [[Class]] は Object です。
ブラウザにおけるグローバルオブジェクトの [[Class]] は Window です。

/**
 * グローバルコード
 */

console.log(this.toString()); // "[object Window]"
console.log({}.toString());   // "[object Object]"

• 15.2.4.2 Object.prototype.toString - ECMA-262 Edition 5.1

ES6 の Object.prototype.toString

ES6 の Object.prototype.toString は次の演算結果を返します。

'[object ' + @@toStringTag + ']'; // ES6

@@toStringTag は Symbol.toStringTag で参照可能なプロパティです。
new Object, new Array 等のビルトインオブジェクトが返す値は ES5 の [[Class]] と変わりませんが、ES5 と違って @@toStringTag を書き換えることが可能です。

function Sample () {}
Sample.prototype[Symbol.toStringTag] = 'Sample';
console.log(new Sample().toString()); // "[object Sample]"

• 19.1.3.6 Object.prototype.toString – ECMA-262 6th Edition

Re: rralmccoy さん

Answer 2

javascriptにおける「this」はそのコードを実行している箇所によって変わります。

var sayHelloShared = function() {
  console.log("Hello, I'm " + this.name);
};
sayHelloShared(); 

scriptタグ直下でこんなコードを実行すると、「this」はウィンドウ自体になります。
したがって、「console.log(this)」を実行した出力結果[object Window]は表示中のウィンドウオブジェクトということになります。
「CodePen」というのはウィンドウにつけられた名前(window.name)ということになりますね。
上記のコードのすぐ次に

var alice = {
  sayHello: sayHelloShared,
  name: 'Alice'
};
alice.sayHello(); 

のように実行された場合、「this」はaliceオブジェクト自体になります。
出力結果の[object Object]はaliceオブジェクトのことです。

Comments

[退会済みユーザー]

ありがとうございます！
CodePenサイトでconsoleしたために出たのですね！
[object Object]は例えば[object alice]などとは表記されないのですね。

[tkturbo]

javascriptではすべてのものが「Object」で、ブラウザには「それぞれのObjectにつけられた名前」はわかりません。
# javaだったらクラス名がわかるんですけどね。

[think49]

クラス名(のようなもの)は Symbol.toStringTag で設定できます。
ES5 の範囲なら instanceof 演算子や Object.getPrototypeOf が利用できます。