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

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

ただいまの
回答率

90.42%

  • JavaScript

    18034questions

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

  • Chrome

    668questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,573

realmccoy

score 90

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

checkベストアンサー

+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]"

 ES6 の Object.prototype.toString

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

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

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

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

Re: rralmccoy さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+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:49

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

    キャンセル

  • 2016/04/28 17:02

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

    キャンセル

  • 2016/04/28 21:53

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

    キャンセル

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

  • JavaScript

    18034questions

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

  • Chrome

    668questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。