天天看點

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

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

2.項目實戰

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

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

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

示例:var test = new CaseLog("11", "内容");

      test.log();

繼續閱讀