前のページ(Hello, function!)へ / 次のページ(Hello, constructor!)へ
今度はオブジェクトを作ります。 オブジェクトには任意のプロパティを付けることが出来るので、 複数の値を一つにまとめて扱うことが出来ます。
それではオブジェクトを作ってみます。 (Hello, object! Sample 1)
<html>
<head>
<script type="text/javascript">
var obj = {message:"Hello, object!"};
alert(obj.message);
</script>
</head>
</html>
空のオブジェクトは {} によって定義出来ます。
{} の中に、 名前 : 初期値, ... と列挙することにより
オブジェクトにプロパティを与えることが出来ます。
もちろん、初期化した後にも
obj.message = "Good-by, object!";
のようにプロパティを設定することが出来ます。
オブジェクトのメソッドを操作します。 (Hello, object! Sample 2)
<html>
<head>
<script type="text/javascript">
var obj = {message: "Hello, object!",
greet: function(){alert(this.message);}
};
obj.greet();
</script>
</head>
</html>
ここでは obj に greet というメソッドを設定しました。 greet 内では this というものがあります。 obj.greet() と実行した場合には this==obj というように実行時に値が決まる特殊な指示句です。 変数と似ていますが、変数ではありません。
In Deep
あくまでも this は実行時に決定されます。 一旦、greetを変数に取り出した場合どうなるでしょうか。 (Hello, object! Sample 3)
<html>
<head>
<script type="text/javascript">
var obj = {message: "Hello, object!",
greet: function(){alert(this.message);}
};
var func = obj.greet;
func();
</script>
</head>
</html>
この場合には undefined という値が表示されます。
obj のメソッドとして呼び出されているのではないため、
obj.message が参照されることはないのです。
それではこの場合の this は何を指しているのでしょうか。
(Hello, object! Sample 4)
<html>
<head>
<script type="text/javascript">
var func = function(){alert(this)};
func();
</script>
</head>
</html>
[object Window] と表示されました。 これは this が指定されていない場合に暗黙の this として ウィンドウ自体を指す Window オブジェクトが与えられているのです。