yoshiweb.NET-blog



HOME > blog > JavaScript のクラスの書き方
« アップルストアで iPhone 3GS の電池交換 | 【node.js】ためしてみた »

JavaScript のクラスの書き方

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

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


CoffeeScript
class Item
  constructor: (@price) ->

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


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

↓↓↓↓変換


JavaScript
var 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 でも同じような書き方に変換されるね!

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

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

↓↓↓↓変換


JavaScript
var 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/

投稿者 yoshiweb - Web制作 - 2012/11/29 - 12:30:11 - Permalink
このエントリーをはてなブックマークに追加

Comments

コメントしてください

コメントを書く

※ スパム対策のためコメント内の URL は全角で書いてください。あとで半角に変換します。