長島冰茶的工程師筆記

這裡講的是類似 Class 的宣告方式，是因為 JavaScript 並沒有真的 Class，而是利用 function 來宣告
和一般的 Class 一樣要使用 new 來產生一個實體，以下是範例說明
--

<script src='jquery.js'></script>
<script>
// 以下範例為組合目前的網址
var Content = function(param) 
{
    // 宣告變數及預設值
    this.link  = (param.link) ? param.link : '';    // 連結
    this.page  = (param.page) ? param.page : 1;     // 分頁
    this.order = (param.order) ? param.order : '';  // 排序

    // 取得連結
    this.getLink = function() 
    {
        return this.link + '?page=' + this.page + '&order=' + this.order
    };

    // 物件處理，注意物件觸發時 this 會指向觸發事件的元素，所以要另外取得物件的值
    // 導向網址
    this.redirect = function(event)
    {
        // 取得自己
        var _self = (event.data) ? event.data : this;

        // 換頁
        window.location.href = _self.getLink();
    };

    // 綁定按鈕做換頁的動作
    // 注意第二個參數，我把 this 傳進去
    // 不然因為事件觸發的關係， redirect 的 this 會指向 #fmBtn
    $('#fmBtn').bind('click', this, this.redirect);
}

$(function()
{
    // 初始化物件
    var content = new Content(
    {
        link  : 'http://localhost/',
        page  : 2,
        order : 'account'
    });

    // 呼叫物件的方法
    // 結果為： http://localhost/?page=2&order=account
    console.log(content.getLink());
});
</script>
<!-- 
    這裡會去呼叫 content.redirect 去換頁
    請注意呼叫後 content.redirect 裡的 this 會指向 #fmBtn
 -->
<input id=fmBtn type='button' value='按我換頁'>

 --
但是上面的範例裡，因為 getLink 及 redirect 是直接定義的，所以每一個 new 出來的實體(instance)都會有一份
這會浪費記憶體空間，造成效能的問題，可以改為定義在 prototype 裡面，這樣所有的實體都會從原型繼承到這兩個 function
像以下範例一樣
--

<script src='jquery.js'></script>
<script>
// 以下範例為組合目前的網址
var Content = function(param) 
{
    // 宣告變數及預設值
    this.link  = (param.link) ? param.link : '';    // 連結
    this.page  = (param.page) ? param.page : 1;     // 分頁
    this.order = (param.order) ? param.order : '';  // 排序

    // 綁定按鈕做換頁的動作
    // 注意第二個參數，我把 this 傳進去
    // 不然因為事件觸發的關係， redirect 的 this 會指向 #fmBtn
    $('#fmBtn').bind('click', this, this.redirect);
}

// 共用函式宣告在 prototype 裡，不管產生多少實體，都只會佔一份記憶體空間 
Content.prototype =
{
    // 取得連結
    getLink : function() 
    {
        return this.link + '?page=' + this.page + '&order=' + this.order
    },

    // 物件處理，注意物件觸發時 this 會指向觸發事件的元素，所以要另外取得物件的值
    // 導向網址
    redirect : function(event)
    {
        // 取得自己
        var _self = (event.data) ? event.data : this;

        // 換頁
        window.location.href = _self.getLink();
    }
}

$(function()
{
    // 初始化物件
    var content = new Content(
    {
        link  : 'http://localhost/',
        page  : 2,
        order : 'account'
    });

    // 呼叫物件的方法
    // 結果為： http://localhost/?page=2&order=account
    console.log(content.getLink());
});
</script>
<!-- 
    這裡會去呼叫 content.redirect 去換頁
    請注意呼叫後 content.redirect 裡的 this 會指向 #fmBtn
 -->
<input id=fmBtn type='button' value='按我換頁'>

 --
另外上面的範例我是用物件實字來定義 prototype，也可以像以下這樣一個一個 function 來定義
--

// 共用函式宣告在 prototype 裡，不管產生多少實體，都只會佔一份記憶體空間 
// 取得連結
Content.prototype.getLink = function() 
{
    return this.link + '?page=' + this.page + '&order=' + this.order
},

// 物件處理，注意物件觸發時 this 會指向觸發事件的元素，所以要另外取得物件的值
// 導向網址
Content.prototype.redirect = function(event)
{
    // 取得自己
    var _self = (event.data) ? event.data : this;

    // 換頁
    window.location.href = _self.getLink();
}