JavaScript のクラスの書き方
IT戦記さんのマネして「プロトタイプを上書きする。コンストラクタをプロトタイプに実装する。」
書き方をしようと思ってたけど、CoffeeScript や TypeScript から書き出される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/
書き方をしようと思ってたけど、CoffeeScript や TypeScript から書き出されるJavaScriptを参考にしよう!
比較的見やすいし CoffeeScript と TypeScript のどっちでも同じような JavaScript を生成するってことは
そんなに悪い書き方じゃなのかと。。。
CoffeeScript
constructor: (@price) ->
showPrice: () ->
alert(this.price);
i = new Item(200)
i.showPrice()
↓↓↓↓変換
JavaScript
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 でも同じような書き方に変換されるね!
TypeScript
price: number;
constructor (price: number) {
this.price = price;
}
showPrice() {
alert (this.price);
}
}
var i = new Item(200);
i.showPrice();
↓↓↓↓変換
JavaScript
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制作
コメント
コメントなし