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è)字符背镇,造成在中英文混排的版面中不能截取等長(zhǎng)的字符串

作用:從字符串左邊截取 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)系作者
  • 序言:七十年代末爆安,一起剝皮案震驚了整個(gè)濱河市叛复,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌扔仓,老刑警劉巖褐奥,帶你破解...
    沈念sama閱讀 206,723評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異翘簇,居然都是意外死亡撬码,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門版保,熙熙樓的掌柜王于貴愁眉苦臉地迎上來耍群,“玉大人,你說我怎么就攤上這事找筝〉腹福” “怎么了?”我有些...
    開封第一講書人閱讀 152,998評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵袖裕,是天一觀的道長(zhǎng)曹抬。 經(jīng)常有香客問我,道長(zhǎng)急鳄,這世上最難降的妖魔是什么谤民? 我笑而不...
    開封第一講書人閱讀 55,323評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮疾宏,結(jié)果婚禮上张足,老公的妹妹穿的比我還像新娘。我一直安慰自己坎藐,他們只是感情好为牍,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著岩馍,像睡著了一般碉咆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蛀恩,一...
    開封第一講書人閱讀 49,079評(píng)論 1 285
  • 那天疫铜,我揣著相機(jī)與錄音,去河邊找鬼双谆。 笑死壳咕,一個(gè)胖子當(dāng)著我的面吹牛席揽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播谓厘,決...
    沈念sama閱讀 38,389評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼幌羞,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了庞呕?” 一聲冷哼從身側(cè)響起新翎,我...
    開封第一講書人閱讀 37,019評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤程帕,失蹤者是張志新(化名)和其女友劉穎住练,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體愁拭,經(jīng)...
    沈念sama閱讀 43,519評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡讲逛,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了岭埠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盏混。...
    茶點(diǎn)故事閱讀 38,100評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖惜论,靈堂內(nèi)的尸體忽然破棺而出许赃,到底是詐尸還是另有隱情,我是刑警寧澤馆类,帶...
    沈念sama閱讀 33,738評(píng)論 4 324
  • 正文 年R本政府宣布混聊,位于F島的核電站,受9級(jí)特大地震影響乾巧,放射性物質(zhì)發(fā)生泄漏句喜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評(píng)論 3 307
  • 文/蒙蒙 一沟于、第九天 我趴在偏房一處隱蔽的房頂上張望咳胃。 院中可真熱鬧,春花似錦旷太、人聲如沸展懈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽标沪。三九已至,卻和暖如春嗜傅,著一層夾襖步出監(jiān)牢的瞬間金句,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評(píng)論 1 262
  • 我被黑心中介騙來泰國打工吕嘀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留违寞,地道東北人贞瞒。 一個(gè)月前我還...
    沈念sama閱讀 45,547評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像趁曼,于是被迫代替她去往敵國和親军浆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

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