JavaScript的原型和原型鏈及項目實戰

1.基本概念1.1 原型

每一個函數都有一個prototype（原型）屬性，這個屬性是一個指標，指向了一個對象，而這個對象用途是包含該類的所有勢力共用屬性和方法。

 

不用原型的方式：

// 小數點，稅率

var decimalDigits = 2,

tax = 5;

function add(x, y) {

    return x + y;

}

function subtract(x, y) {

    return x - y;

}

//alert(add(1, 3));

 

 

第一種方式: 

var Calculator = function (decimalDigits, tax) {

    this.decimalDigits = decimalDigits;

    this.tax = tax;

};

 

Calculator.prototype = {

    add: function (x, y) {

        return x + y;

    },

 

    subtract: function (x, y) {

        return x - y;

    }

};

//alert((new Calculator()).add(1, 3));

 

第二種方式：

 

Calculator.prototype =function() { } ();

Calculator.prototype = function () {

    add = function (x, y) {

        return x + y;

    },

 

    subtract = function (x, y) {

        return x - y;

    }

    return {

        add: add,

        subtract: subtract

    }

} ();

 

//alert((new Calculator()).add(11, 3));

 

 

當然我們也可以分步聲明

var BaseCalculator = function () {

    //為每個執行個體都聲明一個小數位元

    this.decimalDigits = 2;

};

        

//使用原型給BaseCalculator擴充2個對象方法

BaseCalculator.prototype.add = function (x, y) {

    return x + y;

};

 

BaseCalculator.prototype.subtract = function (x, y) {

    return x - y;

};

 

1.2原型鏈

 

ECMAScript中描述了原型鏈的概念，並將原型鏈作為實現繼承的主要方法。其基本思想是利用原型讓一個參考型別繼承另一個參考型別的屬性和方法。簡單回顧一下建構函式、原型和執行個體的關係：每個建構函式都有一個原型對象，原型對象都包含一個指向建構函式的指標，而實際都包含一個指向原型對象的內部指標。那麼假如我們讓原型對象等於另一個類型的執行個體，結果會怎麼樣那？顯然，此時的原型對象將包含一個指向另一個原型的指標，相應地，另一個原型中也包含著一個指向另一個建構函式的指標。假如另一個原型又是另一個類型的執行個體，那麼上述關係依然成立，如此層層遞進，就構成了執行個體與原型的鏈條。這就是所謂原型鏈的基本概念。

 

function SuperType(){ 

  this.property=true;

}

SuperType.prototype.getSuperValue=function(){ 

  return this.property;

};

function SubType(){ 

  this.subproperty=false;

}

SubType.prototype=newSuperType();

SubType.prototype.getSubValue=function(){ 

  return this.subproperty;

};

var instance =new SubType();

alert(instance.getSuperValue());//true

 

2.項目實戰

在道路救援項目中，當操作員每一次進行一步操作，都要記錄在案例日誌表裡面，用來讓管理員清晰的看到每一步操作的操作流程，為了不重複開發，需要做一個案例記錄的工具JS：CaseLogUtil.js

 

 

 

其中，當我們要調用這個方法的時候，直接執行個體化CaseLog, 調用它的log方法即可。

樣本：var test = new CaseLog("11", "內容");

      test.log();