CodePen、[object Object] 、[object Window]とは？
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 2,320
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
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 Object, new 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オブジェクトのことです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
