久しぶりにJavaScriptどっぷりな生活を送りました。
これがかなり楽しい。
なんでかなぁって考えるとJavaScriptをガリゴリ書いてるとFlash 5, Flash MX 時代の ActionScript 1 を思い出してしまうからみたいです。
JavaScriptを書くとFlash MX時代に見て覚えたActionScript Tipsがほとんどそのまま使えて楽しいことこの上なかったりします。
当時むさぼり読んだ Robert Penner さんの書かれた “Robert Penner’s Programming Macromedia Flashmx” は忘れられない本のひとつです。この本でprototypeチェーンそしてOOPを知りました。
JavaScriptでOOP
Class
JavaScriptでClassは使えませんが似たことはできます。
function Dog () { alert('Vow'); } new Dog(); |
prototypeを使いインスタンスメソッド、インスタンス変数を設定します。
function Dog () { } Dog.prototype.name = "Pochi"; Dog.prototype.getName = function () { alert(this.name); } var dog = new Dog(); dog.getName(); |
次のように書くこともできます。
function Dog () { } Dog.prototype = { name: 'Pochi' ,getName: function () { alert(this.name); } } var dog = new Dog(); dog.getName(); |
Class 継承
親Classをextendsするのもprototypeを使います。
function Dog () { } Dog.prototype = { name: 'Pochi' ,getName: function () { alert(this.name); } } function Cat () { } Cat.prototype = new Dog(); Cat.prototype.name = 'Tom'; var cat = new Cat(); cat.getName();//Tom var dog = new Dog(); dog.getName();//Pochi |
子Class Cat は親Class Dog を継承しています。
【注意】
関数、変数はpublic扱いになります。
privateな関数、変数は作れないので使用には注意が必要です。
また、dynamicなので動的に変数・関数の追加が可能です。
便利でもありますが大きな間違いをおかしやすい点でもあると思います。
function Dog () { } Dog.prototype = { name: 'Pochi' ,getName: function () { alert(this.name); } } function Cat () { } Cat.prototype = new Dog(); Cat.prototype.name = 'Tom'; var cat = new Cat(); cat.getName();//Tom var dog = new Dog(); dog.getName();//Pochi cat.color = 'white'; alert(cat.color);//white |
private的な扱いにする方法もあるようですがそれはまた別の機会にポストしたいと思います。
static関数・変数
staticな関数・変数はObjectを使います。
var Dog = { name: 'Pochi' ,getName: function () { alert(this.name); } } Dog.getName(); |
【注意】
Dogは単純なObjectです。
var Cat = Dog; |
などとしてもCatはDogの参照で複製されていません。
var Cat = Dog; Cat.name = 'Tom'; Cat.getName();// Tom Dog.getName();// Tom |
「みたい」なのと割り切れば使うのに困らないと思います。
prototype.jsにはClassを作る関数が用意されているのでそれを使う方法もあります。
Defining classes and inheritance
http://www.prototypejs.org/learn/class-inheritance
ピンバック: 超個人的メモ, JavaScript関連の投稿リンクをまとめておく - イナヅマtvログ