歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> JavaScript的原型和原型鏈及項目實戰

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

日期:2017/3/1 9:19:54   编辑:Linux編程

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();

JavaScript閉包函數快速上手 http://www.linuxidc.com/Linux/2015-12/126286.htm

JavaScript原型,原型鏈 http://www.linuxidc.com/Linux/2015-11/125667.htm

大話設計模式(帶目錄完整版) PDF+源代碼 http://www.linuxidc.com/Linux/2014-08/105152.htm

JavaScript設計模式 中文清晰掃描版PDF http://www.linuxidc.com/Linux/2015-09/122725.htm

淺談JavaScript中的對象 http://www.linuxidc.com/Linux/2015-10/124067.htm

JavaScript高級程序設計(第3版)高清完整PDF中文+英文+源碼 下載 http://www.linuxidc.com/Linux/2014-09/107426.htm

Copyright © Linux教程網 All Rights Reserved