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

jopen 10年前發布 | 25K 次閱讀 Java開發 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

 

20140320104156812.png

2.項目實戰

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

 20140320104222890.png

 

 

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

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

      test.log();

來自:http://blog.csdn.net/hacke2/article/details/21600015

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!