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

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

ただいまの
回答率

90.48%

  • JavaScript

    16957questions

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

  • Chrome

    621questions

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

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

解決済

回答 2

投稿

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

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の小技募集

    JavaScriptは良くも悪くも記述の自由度が高い言語ですよね。 そんなJavaScriptには現場で使われるちょっとした小技や必須のテクニック、競技や問題向けの小技や荒技が存在

  • 受付中

    JavaScriptのプロトタイプチェーンについて

    JavaScriptのプロトタイプチェーンのgetPrototypeOf(obj)を使った書き方を教えてください。下記のコードをprotoを使わずにgetPrototypeOf(o

  • 解決済

    JavaScriptでギャラリーを作りたい

    現在JSでギャラリー的なものを作ろうとしています 仕様としては 画面上段に画像(原寸より小さいもの)を表示し、クリックされると下にその画像の原寸大が表示されるというものです ですが

  • 解決済

    拡張したjQueryインスタンスをDOMツリーに追加して、再度取得後も拡張を維持する方法

    下記のようにDOMツリーから要素を取得した場合は、拡張したメソッドがundefinedになってしまいます。これはjQueryのコンストラクタで再度i要素が初期化されてしまうことはわ

  • 解決済

    [JS] var self = this の意味は?

    JS初心者です。よろしくお願いします。 コードでよく下記のような書き方を見かけますが、これの意味はなんでしょうか? var self = this; 今AngularJSの習得を

  • 解決済

    タグの属性のみコピーしたものを複製したい

    タグの属性のみコピーしたものを複製したいです。 具体的には以下の構成で、 <div class="hoge"> <a href="XXXXXX" class="hoge2" 属性

  • 解決済

    関数で変数作成するにはどうすればいいのか

    前提・実現したいこと javascriptで 関数testに指定した引数1の変数に、引数2の値を代入したいのですがうまくいきません。 発生している問題・エラーメッセージ Unc

  • 受付中

    JavaScript でthis[ ] とはなにか

    JavaScript にthis[ ]というのが出てきたのですが、どんなものか調べて見てもわからないのでわかるいたら教えていただきたいです。 this[f_getCssProp

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

  • JavaScript

    16957questions

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

  • Chrome

    621questions

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