yoshiweb.NET

JavaScript のクラスの書き方

IT戦記さんのマネして「プロトタイプを上書きする。コンストラクタをプロトタイプに実装する。」
書き方をしようと思ってたけど、CoffeeScriptTypeScript から書き出されるJavaScriptを参考にしよう!

比較的見やすいし CoffeeScript と TypeScript のどっちでも同じような JavaScript を生成するってことは
そんなに悪い書き方じゃなのかと。。。


CoffeeScriptclass Item
constructor: (@price) ->

showPrice: () ->
alert(this.price);


i = new Item(200)
i.showPrice()

↓↓↓↓変換


JavaScriptvar Item, i;
Item = (function() {

function Item(price) {
this.price = price;
}

Item.prototype.showPrice = function() {
return alert(this.price);
};

return Item;
})();

i = new Item(200);
i.showPrice();




TypeScript でも同じような書き方に変換されるね!

TypeScriptclass Item {
price: number;
constructor (price: number) {
this.price = price;
}
showPrice() {
alert (this.price);
}
}

var i = new Item(200);
i.showPrice();

↓↓↓↓変換


JavaScriptvar Item = (function () {
function Item(price) {
this.price = price;
}
Item.prototype.showPrice = function () {
alert(this.price);
};
return Item;
})();
var i = new Item(200);
i.showPrice();





▼参考
JavaScript OOP におけるクラス定義方法 - IT戦記
http://d.hatena.ne.jp/amachang/20060516/1147778600

CoffeeScript
http://coffeescript.org/

TypeScript
http://www.typescriptlang.org/

投稿日 : 2012年11月29日 - yoshiweb - カテゴリ: Web制作

コメント

コメントなし