javascript:class
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
javascript:class [2010/02/08 05:43] – 外部編集 127.0.0.1 | javascript:class [2025/09/09 16:23] (現在) – 削除 nullpon | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== クラス ====== | ||
- | JavaScriptにはクラスはないが、関数オブジェクトをコンストラクタとして呼び出すことができる。 | ||
- | |||
- | ===== Functionオブジェクト ===== | ||
- | 関数を定義すると、新しい Function オブジェクトが作成されます。 | ||
- | <code javascript> | ||
- | function ClassA(){ | ||
- | } | ||
- | window.alert(ClassA instanceof Function); | ||
- | </ | ||
- | |||
- | ===== クラスを定義とインスタンス作成 ===== | ||
- | Functionオブジェクトに演算子 new を使うと新しいインスタンスを作成できます。Function オブジェクトはコンストラクタとして働きます。 | ||
- | <code javascript> | ||
- | function MyClass(){ | ||
- | } | ||
- | var my = new MyClass(); | ||
- | window.alert(my instanceof MyClass); | ||
- | window.alert(my.constructor == MyClass); | ||
- | </ | ||
- | インスタンス my の constructor プロパティは 関数オブジェクト MyClass となり、my は MyClass のインスタンスとみなされます。 | ||
- | |||
- | ===== メソッド定義 ===== | ||
- | コンストラクタは prototype プロパティを持っており、 prototype に関数オブジェクトをセットすることで、インスタンスのメソッドとなります。 | ||
- | <code javascript> | ||
- | function MyClass(){ | ||
- | } | ||
- | MyClass.prototype.execute = function () { | ||
- | window.alert(" | ||
- | }; | ||
- | var my = new MyClass(); | ||
- | my.execute(); | ||
- | |||
- | var my2 = new MyClass(); | ||
- | my2.execute(); | ||
- | </ | ||
- | |||
- | インスタンスに直接メソッドを付加することもできます | ||
- | <code javascript> | ||
- | // インスタンス自身にメソッドを定義 | ||
- | my.execute2 = function () { | ||
- | | ||
- | }; | ||
- | my.execute2(); | ||
- | my2.execute2(); | ||
- | </ | ||
- | |||
- | ==== プロトタイプチェイン ==== | ||
- | メソッドを呼び出すと、まずインスタンス自身が呼び出されたメソッドを持っていないかチェックし、持っていればそれを実行します。 | ||
- | <code javascript> | ||
- | function Hoge() { | ||
- | } | ||
- | var hoge = new Hoge(); | ||
- | hoge.execute = function() { alert(" | ||
- | |||
- | hoge.execute(); | ||
- | </ | ||
- | インスタンス自身がメソッドをもっていない場合は、コンストラクタのprototypeからメソッドを探して呼び出します。 | ||
- | <code javascript> | ||
- | function Fuga() { | ||
- | } | ||
- | Fuga.prototype = hoge; | ||
- | |||
- | var fuga = new Fuga(); | ||
- | fuga.execute(); | ||
- | </ | ||
- | |||
- | コンストラクタのprototypeもメソッドを持っていない場合は、prototypeオブジェクトのコンストラクタのprototypeを探して呼び出します。 | ||
- | <code javascript> | ||
- | function Piyo() { | ||
- | } | ||
- | Piyo.prototype = new Fuga(); | ||
- | |||
- | var piyo = new Piyo(); | ||
- | piyo.execute(); | ||
- | </ | ||
- | |||
- | このようにプロトタイプをさかのぼってメソッドを探す仕組みをプロトタイプチェインと呼びます。 | ||
- | |||
- | |||
- | ===== プロパティの定義 ===== | ||
- | 代入式を実行した時点でプロパティが生成されるのでプロパティを宣言をする必要はありません。 | ||
- | <code javascript> | ||
- | function MyClass(){ | ||
- | this.hoge = " | ||
- | } | ||
- | MyClass.prototype.printHoge = function () { | ||
- | print(this.hoge); | ||
- | } | ||
- | MyClass.prototype.printFuga = function () { | ||
- | print(this.fuga); | ||
- | } | ||
- | MyClass.prototype.setMohe = function (mohe) { | ||
- | this.mohe = mohe; | ||
- | } | ||
- | var my = new MyClass(); | ||
- | my.printHoge(); | ||
- | my.fuga = " | ||
- | my.printFuga(); | ||
- | my.setMohe(" | ||
- | print(my.mohe); | ||
- | </ | ||
- | メソッドやプロパティは全て外部から自由にアクセス可能。内部表現の隠蔽は難しい(できなくはない…) | ||
- | |||
- | ===== クラス定義 ===== | ||
- | 最近では prototype にメソッドを一つずつセットしていくよりも、prototypeプロパティそのものを書き換えてしまうことが多い。このときinitializeというメソッドを定義して、コンストラクタで呼び出す作法が一般的。 | ||
- | <code javascript> | ||
- | function MyClass(arg){ | ||
- | this.initialize(arg); | ||
- | } | ||
- | MyClass.prototype = { | ||
- | initialize: funtion(arg) { | ||
- | | ||
- | } | ||
- | printHoge: function() { | ||
- | print(this.hoge); | ||
- | }, | ||
- | printFuga: function () { | ||
- | print(this.fuga); | ||
- | }, | ||
- | setMohe: function (mohe) { | ||
- | this.mohe = mohe; | ||
- | } | ||
- | }; | ||
- | var my = new MyClass(" | ||
- | my.printHoge(); | ||
- | my.fuga = " | ||
- | my.printFuga(); | ||
- | my.setMohe(" | ||
- | window.alert(my.mohe); | ||
- | </ | ||
- | |||
- | ===== 無名関数からクラスを生成 ===== | ||
- | 無名関数もコンストラクタになる。 | ||
- | <code javascript> | ||
- | var MyClass = function(arg) { | ||
- | this.initialize(arg); | ||
- | } | ||
- | MyClass.prototype = { | ||
- | initialize: function(arg) { | ||
- | this.hoge = arg; | ||
- | }, | ||
- | inspect: function() { | ||
- | print(this.prototype); | ||
- | print(this.constructor); | ||
- | for (var i in this) { | ||
- | print (i + " | ||
- | } | ||
- | } | ||
- | } | ||
- | |||
- | var my = new MyClass(1000); | ||
- | my.fuga = " | ||
- | my.inspect(); | ||
- | </ | ||
javascript/class.1265607815.txt.gz · 最終更新: (外部編集)