JS利用prototype給類添加方法操作詳解
本文實(shí)例講述了JS利用prototype給類添加方法操作。分享給大家供大家參考,具體如下:
1.如何定義一個(gè)簡(jiǎn)單的類?
以下是一個(gè)沒(méi)有任何屬性和方法的類的定義:
function MyClass(){};
你可能會(huì)想,這不就是個(gè)簡(jiǎn)單的函數(shù)聲明?沒(méi)錯(cuò),這個(gè)函數(shù)就是一個(gè)類的定義的實(shí)現(xiàn)。如何使用這個(gè)類呢?看下面的代碼:
var cls1 = new MyClass();
這樣,利用new
就可以生成MyClass的一個(gè)實(shí)例了。所以在js中可以說(shuō)函數(shù)就是類,類就是函數(shù)。
2.給類增加屬性和方法
function MyClass(name,age){ this.name = name; this.age = age; } var cls1 = new MyClass("lily",18); alert(cls1.name);
從上面的代碼可以看出,在函數(shù)內(nèi)使用this就能給函數(shù)本身增加屬性值。而在上面的代碼中就給myClass函數(shù)增加了name和age屬性。
同樣,還可以利用this
給這個(gè)類增加一個(gè) toString 方法,代碼如下:
function MyClass(name,age){ this.name = name; this.age = age; this.toString() = function(){ alert(this.name +":"+ this.age); }; } var cls1 = new MyClass("liming",10); cls1.toString();
我們已經(jīng)成功的給MyClass增加了toString方法。另外也可以用以下代碼來(lái)添加方法:
function MyClass(name,age){ this.name = name; this.age = age; } var cls1 = new MyClass("liming",10); cls1.toString() = function(){ alert(this.name +":"+ this.age); }; cls1.toString(); // [liming:10] var cls2 = new MyClass("zhang",10); cls2.toString(); //報(bào)錯(cuò)
雖然這樣也能給這個(gè)類添加一個(gè)方法,但這種方式只是給cls1這個(gè)實(shí)例增加了方法,并未給MyClass本身增加方法。
cls2并不存在toString方法。
3.引出prototype
從上面我們已經(jīng)知道要給MyClss類的本身增加方法,需要講方法定義在MyClass這個(gè)函數(shù)內(nèi)部,這樣的話,每聲明一個(gè)新的實(shí)例,就會(huì)將MyClass本身復(fù)制一遍,這顯然不是最優(yōu)的做法。
既然不能將一個(gè)類(函數(shù))所包含的方法都定義在函數(shù)的內(nèi)部,那么,如何來(lái)給一個(gè)類添加方法呢?這就需要用到函數(shù)的prototype屬性了。
每一個(gè)函數(shù)都會(huì)包含一個(gè)prototype屬性,這個(gè)屬性指向了一個(gè)prototype對(duì)象,我們可以指定函數(shù)對(duì)應(yīng)的prototype對(duì)象。如果不指定,則函數(shù)的prototype屬性將指向一個(gè)默認(rèn)的prototype對(duì)象,并且次默認(rèn)的prototype對(duì)象的constructor屬性又會(huì)指向該函數(shù)。
當(dāng)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新的對(duì)象時(shí),新的對(duì)象會(huì)獲取構(gòu)造函數(shù)的prototype屬性所指向的prototype對(duì)象的所有屬性和方法,這樣一來(lái),構(gòu)造函數(shù)對(duì)應(yīng)的prototype對(duì)象所做的任何操作都會(huì)反映到它所生成的對(duì)象上,所有的這些對(duì)象將共享與構(gòu)造函數(shù)對(duì)應(yīng)的prototype對(duì)象的屬性和方法。
雖然新創(chuàng)建的對(duì)象可以使用它的構(gòu)造函數(shù)所指向的prototype對(duì)象的屬性和方法,但不能像構(gòu)造函數(shù)那樣直接調(diào)用prototype對(duì)象(對(duì)象沒(méi)有prototype屬性)。
簡(jiǎn)而言之,就是如果我們使用函數(shù)的prototype對(duì)象來(lái)給函數(shù)添加方法,那么在創(chuàng)建一個(gè)新的對(duì)象的時(shí)候,并不會(huì)復(fù)制這個(gè)函數(shù)的所有方法,而是指向了這函數(shù)的所有方法。
具體看下面的代碼:
function MyClass(name,age){ this.name = name; this.age = age; } MyClass.prototype.toString = function(){ // } var cls1 = new MyClass("liming",10); cls1.toString(); // var cls2 = new MyClass("zhang",10); cls2.toString();
如果要加入多個(gè)方法,也可以使用下面的方式:
function MyClass(name,age){ this.name = name; this.age = age; } MyClass.prototype = { toString:function(){ // }, sayHellow:function(){ // } };
這就是js中給類添加方法的實(shí)現(xiàn),它是利用prototype來(lái)實(shí)現(xiàn)封裝的。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
postman自定義函數(shù)實(shí)現(xiàn) 時(shí)間函數(shù)的思路詳解
Postman是一款功能強(qiáng)大的網(wǎng)頁(yè)調(diào)試與發(fā)送網(wǎng)頁(yè)HTTP請(qǐng)求的Chrome插件。這篇文章主要給大家介紹postman自定義函數(shù)實(shí)現(xiàn) 時(shí)間函數(shù)的思路詳解,感興趣的朋友一起看看吧2019-04-04JS+cookie實(shí)現(xiàn)購(gòu)物評(píng)價(jià)五星好評(píng)功能
這篇文章主要為大家詳細(xì)介紹了JS+cookie實(shí)現(xiàn)購(gòu)物評(píng)價(jià)五星好評(píng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09每天一篇javascript學(xué)習(xí)小結(jié)(基礎(chǔ)知識(shí))
這篇文章主要介紹了javascript基本的知識(shí)點(diǎn),包括字符串、特殊字符運(yùn)算、變量轉(zhuǎn)字符串等,對(duì)javascript的基礎(chǔ)知識(shí)講解的很全面,為了更好地幫助大家學(xué)習(xí)javascript,感興趣的小伙伴們可以參考一下2015-11-11跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換
跟我學(xué)習(xí)javascript的隱式強(qiáng)制轉(zhuǎn)換,感興趣的小伙伴們可以學(xué)習(xí)一下2015-11-11JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(二十) js錯(cuò)誤處理
語(yǔ)法錯(cuò)誤,也稱解析錯(cuò)誤,發(fā)生在傳統(tǒng)語(yǔ)言的編譯時(shí),在JavaScript中發(fā)生在解釋時(shí),運(yùn)行時(shí)錯(cuò)誤也稱為異常(exception,在編譯期/解釋器后)2012-08-08詳解微信圖片防盜鏈“此圖片來(lái)自微信公眾平臺(tái) 未經(jīng)允許不得引用”的解決方案
這篇文章主要介紹了詳解微信圖片防盜鏈“此圖片來(lái)自微信公眾平臺(tái) 未經(jīng)允許不得引用”的解決方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04