js的prototype屬性介紹

1、介紹:prototype 用給對(duì)象添加屬性或方法;

(注意:prototype是全局屬性,適用于所有的js對(duì)象)

2、語法:添加屬性:object.prototype.name="張三";添加方法:object.prototype.addFun=function(){};

3、首先了解類的概念:JavaScript 本身是一種面向?qū)ο蟮恼Z言,它所涉及的元素根據(jù)其屬性的不同都依附于某一個(gè)特定的類。我們所常見的類包括:數(shù)組變量(Array)、邏輯變量(Boolean)、日期變量(Date)、結(jié)構(gòu)變量(Function)、數(shù)值變量(Number)、對(duì)象變量(Object)、字符串變量(String) 等,而相關(guān)的類的方法,也是程序員經(jīng)常用到的(在這里要區(qū)分一下類的注意和屬性發(fā)方法),例如數(shù)組的push方法、日期的get系列方法、字符串的split方法等等,

但是在實(shí)際的編程過程中不知道有沒有感覺到現(xiàn)有方法的不足?prototype 方法應(yīng)運(yùn)而生!下面,將通過實(shí)例由淺入深講解 prototype 的具體使用方法:

1、簡(jiǎn)單的列子,了解prototype;

(1)Number.add(num):數(shù)字相加;

? ? 實(shí)現(xiàn)方法:Number.prototype.add=function(num){

? ? ? ? ? ? ? ? ? ? ? ? ? ? return(this+num)

????????????????????????};

? ? ? ?試驗(yàn):alert((5).add(13))

一次增加多個(gè)元素!

實(shí)現(xiàn)方法:

Array.prototype.pushPro = function() {

var currentLength = this.length;

for (var i = 0; i < arguments.length; i++) {

this[currentLength + i] = arguments[i];

}

return this.length;

}

  應(yīng)該不難看懂吧?以此類推,你可以考慮一下如何通過增強(qiáng) Array.pop 來實(shí)現(xiàn)刪除任意位置,任意多個(gè)元素(具體代碼就不再細(xì)說了)

(2) String.length

作用:這實(shí)際上是 String 類的一個(gè)屬性,但是由于 JavaScript 將全角、半角均視為是一個(gè)字符,在一些實(shí)際運(yùn)用中可能會(huì)造成一定的問題,現(xiàn)在我們通過 prototype 來彌補(bǔ)這部不足。

實(shí)現(xiàn)方法:

String.prototype.cnLength = function(){

var arr=this.match(/[^\x00-\xff]/ig);

return this.length+(arr==null?0:arr.length);

}

試驗(yàn):alert("EaseWe空間Spaces".cnLength()) -> 顯示 16

這里用到了一些正則表達(dá)式的方法和全角字符的編碼原理,由于屬于另兩個(gè)比較大的類別,本文不加說明,請(qǐng)參考相關(guān)材料。

3、新功能的實(shí)現(xiàn),深入 prototype:在實(shí)際編程中所用到的肯定不只是已有方法的增強(qiáng),更多的實(shí)行的功能的要求,下面我就舉兩個(gè)用 prototype 解決實(shí)際問題的例子:

(1) String.left()

問題:用過 vb 的應(yīng)該都知道left函數(shù),從字符串左邊取 n 個(gè)字符,但是不足是將全角、半角均視為是一個(gè)字符,造成在中英文混排的版面中不能截取等長的字符串

作用:從字符串左邊截取 n 個(gè)字符,并支持全角半角字符的區(qū)分

實(shí)現(xiàn)方法:

String.prototype.left = function(num,mode){

if(!/\d+/.test(num))return(this);

var str = this.substr(0,num);

if(!mode) return str;

var n = str.Tlength() - str.length;

num = num - parseInt(n/2);

return this.substr(0,num);

}

試驗(yàn):

alert("EaseWe空間Spaces".left(8)) -> 顯示 EaseWe空間

alert("EaseWe空間Spaces".left(8,true)) -> 顯示 EaseWe空

本方法用到了上面所提到的String.Tlength()方法,自定義方法之間也能組合出一些不錯(cuò)的新方法呀!

(2) Date.DayDiff()

作用:計(jì)算出兩個(gè)日期型變量的間隔時(shí)間(年、月、日、周)

實(shí)現(xiàn)方法:

Date.prototype.DayDiff = function(cDate,mode){

try{

cDate.getYear();

}catch(e){

return(0);

}

var base =60*60*24*1000;

var result = Math.abs(this - cDate);

switch(mode){

case "y":

result/=base*365;

break;

case "m":

result/=base*365/12;

break;

case "w":

result/=base*7;

break;

default:

result/=base;

break;

}

return(Math.floor(result));

}

試驗(yàn):alert((new Date()).DayDiff((new Date(2002,0,1)))) -> 顯示 329

alert((new Date()).DayDiff((new Date(2002,0,1)),"m")) -> 顯示 10

當(dāng)然,也可以進(jìn)一步擴(kuò)充,得出響應(yīng)的小時(shí)、分鐘,甚至是秒。

(3) Number.fact()

作用:某一數(shù)字的階乘

實(shí)現(xiàn)方法:

Number.prototype.fact=function(){

var num = Math.floor(this);

if(num<0)return NaN;

if(num==0 || num==1)

return 1;

else

return (num*(num-1).fact());

}

試驗(yàn):alert((4).fact()) -> 顯示 24

這個(gè)方法主要是說明了遞歸的方法在 prototype 方法中也是可行的!

JavaScript能夠?qū)崿F(xiàn)的面向?qū)ο蟮奶卣饔校?/p>

·公有屬性(public field)

·公有方法(public Method)

·私有屬性(private field)

·私有方法(private field)

·方法重載(method overload)

·構(gòu)造函數(shù)(constructor)

·事件(event)

·單一繼承(single inherit)

·子類重寫父類的屬性或方法(override)

·靜態(tài)屬性或方法(static member)

例子一(JavaScript中允許添加行為的類型):可以在類型上使用proptotype來為類型添加行為。這些行為只能在類型的實(shí)例上體現(xiàn)。 JS中允許的類型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String


Object.prototype.Property = 1;?

Object.prototype.Method = function ()?

{?

alert(1);?

}?

var obj = new Object();?

alert(obj.Property);?

obj.Method();?


Object.prototype.Property = 1;

Object.prototype.Method = function (){ alert(1);}?

var obj = new Object();

alert(obj.Property);

obj.Method();

例子二(prototype使用的限制):在實(shí)例上不能使用prototype,否則發(fā)生編譯錯(cuò)誤


var obj = new Object();?

obj.prototype.Property = 1; //Error?

//Error?

obj.prototype.Method = function()?

{?

alert(1);?

}?


var obj = new Object();obj.prototype.Property = 1; //Error//Errorobj.prototype.Method = function(){ alert(1);}

例子三(如何定義類型上的靜態(tài)成員):可以為類型定義“靜態(tài)”的屬性和方法,直接在類型上調(diào)用即可


Object.Property = 1;?

Object.Method = function()?

{?

alert(1);?

}?

alert(Object.Property);?

Object.Method();?


Object.Property = 1;Object.Method = function(){ alert(1);} alert(Object.Property);Object.Method();

例子五():這個(gè)例子演示了通常的在JavaScript中定義一個(gè)類型的方法

代碼如下:


function Aclass()?

{?

this.Property = 1;?

this.Method = function()?

{?

alert(1);?

}?

}?

var obj = new Aclass();?

alert(obj.Property);?

obj.Method();?


function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();alert(obj.Property);obj.Method();

例子六(JavaScript中允許添加行為的類型):可以在外部使用prototype為自定義的類型添加屬性和方法。

代碼如下:


function Aclass()?

{?

this.Property = 1;?

this.Method = function()?

{?

alert(1);?

}?

}?

Aclass.prototype.Property2 = 2;?

Aclass.prototype.Method2 = function?

{?

alert(2);?

}?

var obj = new Aclass();?

alert(obj.Property2);?

obj.Method2();?


function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}Aclass.prototype.Property2 = 2;Aclass.prototype.Method2 = function{ alert(2);}var obj = new Aclass();alert(obj.Property2);obj.Method2();

例子八():可以在對(duì)象上改變屬性。(這個(gè)是肯定的)也可以在對(duì)象上改變方法。(和普遍的面向?qū)ο蟮母拍畈煌?/p>

代碼如下:


function Aclass()?

{?

this.Property = 1;?

this.Method = function()?

{?

alert(1);?

}?

}?

var obj = new Aclass();?

obj.Property = 2;?

obj.Method = function()?

{?

alert(2);?

}?

alert(obj.Property);?

obj.Method();?


function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ alert(2);}alert(obj.Property);obj.Method();

例子九():可以在對(duì)象上增加屬性或方法

代碼如下:


function Aclass()?

{?

this.Property = 1;?

this.Method = function()?

{?

alert(1);?

}?

}?

var obj = new Aclass();?

obj.Property = 2;?

obj.Method = function()?

{?

alert(2);?

}?

alert(obj.Property);?

obj.Method();?


function Aclass(){this.Property = 1;this.Method = function(){ alert(1);}}var obj = new Aclass();obj.Property = 2;obj.Method = function(){ alert(2);}alert(obj.Property);obj.Method();

例子十(如何讓一個(gè)類型繼承于另一個(gè)類型):這個(gè)例子說明了一個(gè)類型如何從另一個(gè)類型繼承。

代碼如下:


function AClass()?

{?

this.Property = 1;?

this.Method = function()?

{?

alert(1);?

}?

}?

function AClass2()?

{?

this.Property2 = 2;?

this.Method2 = function()?

{?

alert(2);?

}?

}?

AClass2.prototype = new AClass();?

var obj = new AClass2();?

alert(obj.Property);?

obj.Method();?

alert(obj.Property2);?

obj.Method2();?


function AClass(){ this.Property = 1; this.Method = function() { alert(1); }} function AClass2(){ this.Property2 = 2; this.Method2 = function() { alert(2); }}AClass2.prototype = new AClass(); var obj = new AClass2();alert(obj.Property);obj.Method();alert(obj.Property2);obj.Method2();

?例子十一(如何在子類中重新定義父類的成員):這個(gè)例子說明了子類如何重寫父類的屬性或方法。

代碼如下:


function AClass()?

{?

this.Property = 1;?

this.Method = function()?

{?

alert(1);?

}?

}?

function AClass2()?

{?

this.Property2 = 2;?

this.Method2 = function()?

{?

alert(2);?

}?

}?

AClass2.prototype = new AClass();?

AClass2.prototype.Property = 3;?

AClass2.prototype.Method = function()?

{?

alert(4);?

}?

var obj = new AClass2();?

alert(obj.Property);?

obj.Method();?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,142評(píng)論 0 2
  • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建,需要時(shí)才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,314評(píng)論 1 10
  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,118評(píng)論 2 17
  • 北京2018年4月1日上午,NBA常規(guī)賽勇士客戰(zhàn)國王的比賽中,發(fā)生了令人痛心不已的一幕。比賽進(jìn)行到第三節(jié)還有41...
    Curry_宇閱讀 1,363評(píng)論 1 1
  • 剛剛讀了一篇文章,論如何在社交時(shí)代談到男朋友。 明天是情人節(jié),這篇文章真是恰逢時(shí)機(jī)。讓作為單身狗的我心念一動(dòng)。 文...
    33不喝酒閱讀 354評(píng)論 0 0

友情鏈接更多精彩內(nèi)容