Javascript創(chuàng)建類(lèi)和對(duì)象詳解
現(xiàn)總結(jié)一下Javascript創(chuàng)建類(lèi)和對(duì)象的幾種方法:
1、原始的創(chuàng)建方法:
<script type="text/javascript"> var person = new Object(); person.name="Amy"; person.sex="Woman"; person.show=function(){ document.write("name is: "+this.name+" ; sex is:"+this.sex); } person.show(); </script>
原始的創(chuàng)建方法對(duì)于熟悉面向?qū)ο蟮娜藖?lái)說(shuō)難以接受,總感覺(jué)屬性和方法的封裝不是很緊密,這種封裝是以“對(duì)象名”+“.”的方式進(jìn)行,表示對(duì)象名后跟的屬性和方法是這個(gè)對(duì)象擁有的東西,這個(gè)對(duì)象(例如:person)就是封裝好的結(jié)果,你可以繼續(xù)追加方法和屬性,例如追加age屬性:person.age=23;這種創(chuàng)建方法會(huì)讓熟悉Java編程的人感到很難受。我們可以對(duì)原始的創(chuàng)建方法進(jìn)一步“封裝”一下,請(qǐng)看下一步:
2、工廠方法模式:
<script type="text/javascript"> function personFactory(name,age,sex){ var ob=new Object(); ob.name=name; ob.age=age; ob.sex=sex; ob.show=function(){ document.write(ob.name+" "+ob.age+" "+ob.sex); } return ob; } var person=personFactory("Amy",21,"Woman"); person.show(); </script>
工廠方法模式看起來(lái)更像一個(gè)類(lèi)了,personFactory對(duì)原始的創(chuàng)建方法進(jìn)行了封裝,并將創(chuàng)建好的對(duì)象返回給person引用變量,person就可以引用這個(gè)創(chuàng)建好的對(duì)象了,但是還不夠完美:你每一次創(chuàng)建一個(gè)對(duì)象, 并使用該對(duì)象調(diào)用show()方法時(shí),都會(huì)創(chuàng)建新的show()函數(shù),它們完全可以調(diào)用同一個(gè)show方法,優(yōu)化方法是將show放到工廠外,如下:
<script type="text/javascript"> function show(){ document.write(this.name+" "+this.age+" "+this.sex); } function personFactory(name,age,sex){ var ob=new Object(); ob.name=name; ob.age=age; ob.sex=sex; ob.show=show; return ob; } var person=personFactory("Amy",22,"Woman"); person.show(); </script>
從功能上說(shuō),上面的代碼解決了函數(shù)重用問(wèn)題,但是呈現(xiàn)方式不像是創(chuàng)建一個(gè)對(duì)象,熟悉Java的人仍感到難受。請(qǐng)看下一步:
3、構(gòu)造方法模式:
<script type="text/javascript"> function person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; this.show=function(){ document.write(this.name+" "+this.age+" "+this.sex); document.write("<br>"); } } var per=new person("Amy",22,"Woman"); per.show(); </script>
上述代碼的創(chuàng)建方式已經(jīng)與Java類(lèi)和對(duì)象的創(chuàng)建方式幾乎一樣了,封裝好類(lèi)的屬性和方法,然后利用new關(guān)鍵字創(chuàng)建并返回一個(gè)對(duì)象,這不就是Java創(chuàng)建類(lèi)和對(duì)象的過(guò)程嗎,是的,就是這個(gè)過(guò)程,但是還可以?xún)?yōu)化,這種方式創(chuàng)建的對(duì)象調(diào)用show方法是也會(huì)即時(shí)地創(chuàng)建一個(gè)show函數(shù),我們能不能創(chuàng)建一個(gè)所有對(duì)象公用的一個(gè)方法呢?就像Java類(lèi)中的static方法一樣,所有對(duì)象都使用同一個(gè)static方法,答案是可以的。請(qǐng)看下一步:
4、動(dòng)態(tài)原型方法:
<script type="text/javascript"> function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; if(typeof Person.tag == "undefined"){ Person.prototype.show=function(){ document.write(this.name+" "+this.age+" "+this.sex); document.write("<br>"); } Person.tag=true; } } var per=new Person("Peter",22,"Man"); per.show(); </script>
這里使用了一點(diǎn)技巧,當(dāng)用new創(chuàng)建對(duì)象是,會(huì)執(zhí)行Person功能塊中的if判斷語(yǔ)句,順序從上往下,剛開(kāi)始tag變量當(dāng)然沒(méi)有定義,所以執(zhí)行if語(yǔ)句塊里的內(nèi)容:
Person.prototype.show=function(){ document.write(this.name+" "+this.age+" "+this.sex); document.write("<br>"); }
這段內(nèi)容的含義是創(chuàng)建一個(gè)屬于類(lèi)Person的show方法,注意,它是一個(gè)類(lèi)方法,相當(dāng)于Java中static修飾后的方法,而非單個(gè)對(duì)象的方法,這樣所有的對(duì)象均可調(diào)用同一個(gè)方法了,這樣也不用每次不同對(duì)象調(diào)用方法是都創(chuàng)建自己的show函數(shù)了,既節(jié)省空間又節(jié)省時(shí)間,這種方法豈不更妙。這里解釋一下,以“類(lèi)名.prototype.屬性/方法”方式構(gòu)造的屬性和方法相當(dāng)于Java中用static修飾的變量或方法,是屬于整個(gè)類(lèi)的,而非單個(gè)的對(duì)象,也即所有對(duì)象是共享的。
以上是學(xué)習(xí)JS類(lèi)和對(duì)象的總結(jié),其中個(gè)人理解錯(cuò)誤之處還望大家批評(píng)指正。
- JS創(chuàng)建類(lèi)和對(duì)象的兩種不同方式
- 跟我學(xué)習(xí)javascript創(chuàng)建對(duì)象(類(lèi))的8種方法
- JavaScript 創(chuàng)建對(duì)象和構(gòu)造類(lèi)實(shí)現(xiàn)代碼
- JavaScript 常見(jiàn)對(duì)象類(lèi)創(chuàng)建代碼與優(yōu)缺點(diǎn)分析
- JS OOP包機(jī)制,類(lèi)創(chuàng)建的方法定義
- JavaScript創(chuàng)建類(lèi)/對(duì)象的幾種方式概述及實(shí)例
- 創(chuàng)建js對(duì)象和js類(lèi)的方法匯總
- JavaScript構(gòu)造函數(shù)詳解
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式)
- JS中的構(gòu)造函數(shù)詳細(xì)解析
- 深入理解javascript構(gòu)造函數(shù)和原型對(duì)象
- JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì)詳解【類(lèi)的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等】
相關(guān)文章
推薦一些非常不錯(cuò)的javascript學(xué)習(xí)資源站點(diǎn)
推薦一些非常不錯(cuò)的javascript學(xué)習(xí)資源站點(diǎn)...2007-08-08Javascript模塊化編程(三)require.js的用法及功能介紹
這個(gè)系列的第一部分和第二部分,介紹了Javascript模塊原型和理論概念,今天介紹如何將它們用于實(shí)戰(zhàn)。我采用的是一個(gè)非常流行的庫(kù)require.js感興趣的朋友可以了解下啊2013-01-01關(guān)于js中alert彈出窗口文本換行問(wèn)題簡(jiǎn)單詳細(xì)說(shuō)明
js中alert彈出窗口文本換行是一個(gè)小問(wèn)題,本人很是郁悶,于是搜集整理下,曬出來(lái)和大家分享2012-12-12從未有過(guò)的JavaScript運(yùn)算符詳細(xì)解釋
這篇文章主要為大家介紹了,JavaScript運(yùn)算符詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01整理JavaScript對(duì)DOM中各種類(lèi)型的元素的常用操作
這篇文章主要介紹了JavaScript對(duì)DOM中各種類(lèi)型的元素的常用操作整理,DOM操作是JavaScript程序的一大根本任務(wù),需要的朋友可以參考下2016-05-05JavaScript實(shí)現(xiàn)快速排序(自已編寫(xiě))
用到j(luò)avascript的排序一組數(shù)字,js沒(méi)有直接的數(shù)字比較的函數(shù)可以調(diào)用,所以自己寫(xiě)了一個(gè)快速排序,需要的朋友可以了解下2012-12-12深入理解JS中的Function.prototype.bind()方法
bind 是 ES5 中新增的一個(gè)方法,可以改變函數(shù)內(nèi)部的this指向。這篇文章小編將帶領(lǐng)大家深入理解Javascript中的Function.prototype.bind()方法。有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-10-10