JavaScript 實現類的多種方法實例

2019-11-20 22:45:31

字體：大中小

來源：轉載

供稿：網友

構造方法

function coder()
{
    this.name = '現代魔法';
    this.job = 'Web 開發者';
    this.coding = function ()
    { alert('我正在寫代碼'); }
}

var coder = new coder();
alert(coder.name);
coder.coding();

工廠方法

復制代碼代碼如下:

function createCoderFactory()
{
    var obj = new Object();
    obj.name = '現代魔法';
    obj.job = '程序員';
    obj.coding = function ()
    {
        alert('我正在寫代碼');
    };
    return obj;
}
var coder = createCoderFactory();
alert(coder.name);
coder.coding();

工廠方法和構造方法都有著一個相同的缺點，就是每創建一個實例，都會實例化該類的每個函數。

原型鏈

復制代碼代碼如下:

function coder(){}
coder.prototype.name = '現代魔法';
coder.prototype.job = '程序員';
coder.prototype.coding = function(){
    alert('我正在寫代碼');
};
var coder = new coder();
alert(coder.name);
coder.coding();

原型鏈有個缺點就是它所有屬性都共享，只要一個實例改變其他的都會跟著改變。如：

復制代碼代碼如下:

var coder1 = new coder();
var coder2 = new coder();
alert(coder1.name);     /*顯示現代魔法*/
coder2.name = 'nowamagic';
alert(coder1.name);     /*顯示nowamagic*/
alert(coder2.name);     /*這個也顯示nowamagic*/

混合方式
以上三種都有著各自的缺點，所以我們要加以改進。

復制代碼代碼如下:

function coder()
{
    this.name = '現代魔法';
    this.job = '程序員';
}
coder.prototype.coding = function(){
    alert('我正在寫代碼');
};

動態原鏈
要解決前三種的缺點，還有一種方法。

復制代碼代碼如下:

function coder()
{
    this.name = '現代魔法';
    this.job = '程序員';
    if (typeof(coder._init) == 'undefined')
    {
        this.coding = function ()
        {
            alert('我正在寫代碼');
        };
        this._init = true;
    }
}