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

Question

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

解決済

回答 2

投稿 2016/04/28 10:45

評価
クリップ 0
VIEW 5,110

退会済みユーザー

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]
は具体的に何を意味しているのでしょうか？

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 2 件

評価が高い順
新着順
古い順

+1

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オブジェクトのことです。

投稿 2016/04/28 11:17

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/04/28 11:49

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

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

キャンセル
2016/04/28 17:02

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

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

キャンセル
2016/04/28 21:53

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

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

キャンセル

同じタグがついた質問を見る

score 1 · Accepted Answer · 2016-04-28T21:50

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 さん

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

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

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

String 型への変換

ES5.1 の Object.prototype.toString

ES6 の Object.prototype.toString

関連した質問

同じタグがついた質問を見る

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

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

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

String 型への変換

ES5.1 の Object.prototype.toString

ES6 の Object.prototype.toString

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン