color pencils

JavaScriptのオブジェクト指向１

Category:Programing/Coding

Tags:JavaScript

JavaScriptにおけるオブジェクト指向についてまとめまとめメモメモ。

空のオブジェクト作成
var person = {};			//(1-1)
if(!person) var person = {};		//(1-2)
var person = window.person || {};	//(1-3)

(1-1)で、これでオブジェクト作成。
また、名前空間の衝突を避けるために、(1-2)とか、(1-3)とかみたいにすると、すでにその名前空間が存在するかどうかを確認してくれて、不用意な上書きされずに済む。

オブジェクトのプロパティ
var person = {
	name : 'someone',
	MyName : function(){
		alert(this.name);
	}
};			//(2-1)

alert(person.name);	//(2-2) 'someone'を表示
person.NyName();	//(2-3) 'someone'を表示

(2-1)のようにして、オブジェクトにプロパティを定義。
(2-2)、(2-3)は同じ結果になります。
.(ドット)でオブジェクトのプロパティにアクセスできる。
また、thisポインタみたいなことができる。
ここら辺は普通。

プロパティの追加

なんか途中でプロパティを追加できるらしい。ここら辺から不思議でよくわからなくなってくる。。

person.age = 20;	
person.MyAge = function(){
	alert(this.age);
};			//(3-1)

person.MyAge();		//(3-2) '20'を表示

実行中に定義を追加するとか不思議な感じだけど、ここら辺はまだなんとかわかる。
(3-1)の結果、(3-2)で新しくプロパティが追加されたのがわかる。

オブジェクト2つ考えてみる

(4-1)のように、オブジェクトdogを新しく追加する。

var dog = {
	name : 'hana',
	age : 5
};			//(4-1)

person.MyName();	//(4-2) 'someone'を表示
person.MyAge();		//(4-2) '20'を表示
dog.MyName = person.MyName;	//(4-3)
dog.MyAge = person.MyAge;	//(4-3)
dog.MyName();		//(4-4) 'hana'を表示
dog.MyAge();		//(4-4) '5'を表示

(4-3)で関数を代入するなんて不思議なことしてます^^
関数をオブジェクトとみなしてこういうことができるらしい。。確かに定義するときもfunction()が付いてるだけで他のプロパティと似てる。
JavaScriptでは関数もオブジェクトとみなして、関数オブジェクトって言うらしいです(そのまんまｗ

関数の実装は同じだけれど、thisで指されるものがオブジェクト(personとdog)ごとに違うので結果が異なってくる。( (4-2)と(4-4) )

まだまだつづくよ

JavaScriptって同じコトやるのにいろんな書き方あるからまとめないと。。むむ。早く動かせるもの作りたい(＞＿＜；)

次回以降予定。
JavaScriptのクラスについて。
prototypeチェーンについて。
prototype.jsを使おう。
イベント処理しよう。

参考

関連記事