IT戦記

JavaScript OOP におけるクラス定義方法

JavaScript

クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。

ちなみに、以下のすべての例はこのクラスを定義しています。

ちなみに、僕は一番下の書き方ですね。

皆さんはどのようにプログラミングしていますか？

プロトタイプを使わない。クロージャを使う。

//  プロトタイプを使わない。
//  クロージャを使う。
function Item(price) {
    this.showPrice = function() {
        alert(price);
    };
}

プロトタイプを使わない。クロージャを使わない。

//  プロトタイプを使わない。
//  クロージャを使わない。
function Item(price) {
    this.price = price;
    this.showPrice = function() {
        alert(this.price);
    };
}

プロトタイプを使わない。クロージャを使わない。メソッドを外に出す。

//  プロトタイプを使わない。
//  クロージャを使わない。
//  メソッドを外に出す。
function Item(price) {
    this.price = price;
    this.showPrice = Item_showPrice;
}
function Item_showPrice() {
    alert(this.price);
};

プロトタイプにメソッドを追加する。

//  プロトタイプにメソッドを追加する。
function Item(price) {
    this.price = price
}
Item.prototype.showPrice = function() {
    alert(this.price);
};

プロトタイプにメソッドを追加する。コンストラクタをプロトタイプに実装する。

//  プロトタイプにメソッドを追加する。
//  コンストラクタを Prototype に実装する。
function Item() {
    this.initialize.apply(this, arguments);
}
Item.prototype.initialize = function(price) {
    this.price = price;
};
Item.prototype.showPrice = function() {
    alert(this.price);
};

プロトタイプを上書きする。

//  プロトタイプを上書きする。
function Item(price) {
    this.price = price
}
Item.prototype = {
    showPrice: function() {
        alert(this.price);
    }
};

プロトタイプを上書きする。コンストラクタをプロトタイプに実装する。

//  プロトタイプを上書きする。
//  コンストラクタを Prototype に実装する。
function Item() {
    this.initialize.apply(this, arguments);
}
Item.prototype = {
    initialize: function(price) {
        this.price = price;
    },
    showPrice: function() {
        alert(this.price);
    }
};

ツイートする

Permalink | コメント(1) | トラックバック(6) | 20:23