javascript每日必學(xué)之封裝
朋友們好,前面我們已經(jīng)講解了有關(guān)javascript的基礎(chǔ),從今天的內(nèi)容開始,我們就要開始講有關(guān)封裝的內(nèi)容了,這里,我們就一點(diǎn)一點(diǎn)地接觸到OOP(面向?qū)ο缶幊蹋┝?,如果作為一門語言使用的程序員連OOP都不知道是什么,或者只聽說過,自己沒有去領(lǐng)悟,不能寫出面向?qū)ο蟮拇a,那么也沒有學(xué)習(xí)程序的必要了,下面我先會給大家詳細(xì)的介紹面向?qū)ο笫鞘裁?,面向過程是什么,要想弄明白面向?qū)ο螅紫任覀兙捅仨氈烂嫦蜻^程。在你已經(jīng)弄明白了面向過程之后,我們也不能盲目地為了OOP而OOP,那樣只會是做一些徒勞的事,因?yàn)樵诖蠖鄶?shù)時候,我們寫一些代碼只是為了解決一小事情,那么,我們就沒必要寫OOP了,只需要寫一些面向過程的代碼就可以了,用個詞來形容“因地制宜”。
我們就先從面向過程開始,先來解釋一下過程是什么意思,我們平時所說的“程序”二字其實(shí)過程,執(zhí)行一個程序,也就是執(zhí)行一個過程,例如:上班,就是一個程序,其中的過程經(jīng)過是,9點(diǎn)準(zhǔn)時到公司,做一些自己應(yīng)該完成的事,下午6點(diǎn)不管做成什么樣,上班的過程做完了,離開公司,這就是過程;再來個更具體的例子,取款,執(zhí)行的過程我們就寫得更明白一點(diǎn):
1、帶上銀行卡到ATM
2、插入銀行卡
3、輸入密碼
4、輸入取款數(shù)目
5、ATM吐鈔
6、把錢放入自己兜里
6、如果發(fā)現(xiàn)沒有取到自己想要數(shù),返回第4步
7、如果要打印回執(zhí)單,就點(diǎn)擊打印回執(zhí)單;如果不打印,就省略該步驟
8、退卡
9、程序完畢
從上面的步驟我們可以看出,從第一步到最后一步,這就是執(zhí)行順序,第4到第6步就是一個循環(huán)過程,第7步是個分支過程,這就是過程,也就是程序。我們寫代碼的目的就是模擬一些行為過程,用計算機(jī)的高速運(yùn)算的特點(diǎn)為我們的生活服務(wù)。
我們就可以把取款封裝成一個函數(shù),這樣,這就是一個獨(dú)立的過程,在需要的時候,我們就可以調(diào)用這個函數(shù),就能完成我們的工作需要,下面我們就用一個最簡單的例子來表達(dá)一個最簡單的程序過程
function KissWife(whoseWife){
console.log(whoseWife+"把臉湊過來");
console.log("我把嘴唇印上去");
console.log("木啊一聲");
console.log("親"+whoseWife+"一次完成");
}
KissWife("我老婆");

看圖說話,在合適的時候,我們調(diào)用KissWife函數(shù),輸入合適參數(shù),我們執(zhí)行完一個過程了。
OOP的目的就是提高代碼的重用率,用最少的代碼干盡量多的事,使用參數(shù),也是面向?qū)ο缶幊痰囊环N體現(xiàn),我們來舉個反例,如果我們在不使用參數(shù)的情況下,我們在想親別人老婆的時候,就要重新寫一個KissWife函數(shù),這樣,我們就寫了大量重復(fù)的代碼,不方便代碼管理,諸多不便,方法不順溜,就算在親別人老婆的時候被發(fā)現(xiàn)的機(jī)率就大大增加了,帶來了一些不必要的麻煩。
這時候有同學(xué)想問了,我覺得,我覺得我不習(xí)慣使用參數(shù),就是不想傳遞參數(shù),代碼管理哪里會出現(xiàn)不方便管理呢?好,這個問題問得相當(dāng)?shù)牡轿弧?/p>
我來解釋一下吧,如果在這個過程執(zhí)行過程中,我們發(fā)現(xiàn)有不合理的地方,需要修改,例如,我還想伸個舌頭啥的,我們就要在親自己老婆的函數(shù)中修改(麻煩),還要在親別人老婆的函數(shù)中修改(麻煩+1),當(dāng)我們有很多個類似的函數(shù)的時候,是不是要全部做修改(麻煩+n);第二個壞處就是修改次數(shù)多了,你能保證一次性全部修改都不會出錯嗎(容易失誤),這就能體現(xiàn)出了,如果我們只是完全寫一些重復(fù)性的代碼,工作效率大打折扣。
通過上面的講解,其實(shí)新手讀者們還是沒能理解什么是OOP(面向?qū)ο缶幊蹋?,我們現(xiàn)在就從對象(object)開始講解,這里的對象,不能單純地理解成談戀愛時所處的男女朋友,對象是指世間的萬事萬物,太陽,大海,人,寵物……;每一種我們可以想得到的事物,每一個對象都有自己的屬性,行為。

我們就可以像上圖這樣來理解,鳥就是一個對象,它有自己屬性,有自己的行為,下面我們就用具體代碼來封裝一個關(guān)于鳥的類。(注:在javascript語言中function關(guān)鍵字中僅僅用來定義函數(shù),也可以定義類,它不能像高級語言那樣使用Class關(guān)鍵字,后面我們講繼承的時候,我們還會用特殊方法來實(shí)現(xiàn)繼承)
//聲明一個鳥類
function Bird(){
this.name = "鴿子";
this.color = "灰色";
this.habitat = "籠子";
this.weight = "500克";
}
//使用原型鏈的方式,來定義鳥的行,也可以用來定義屬性,但是,屬性一般用this關(guān)鍵字來聲明
//行為和屬性,其實(shí)同一個級別的,后面我們用for in來給大家驗(yàn)證
//鳴叫
Bird.prototype.Sing = function(){
console.log("咕咕咕");
}
//進(jìn)食
Bird.prototype.Eat = function(){
console.log("吃了一粒玉米");
}
//飛翔
Bird.prototype.Fly = function(){
console.log("在天空中飛翔著");
}
//孵蛋
Bird.prototype.Brood = function(){
cossole.log("正在孵化鴿子蛋");
}
現(xiàn)在我們類已經(jīng)聲明好了,但是我們,怎么使用它呢?現(xiàn)在它只是一個類,還不是實(shí)例,就是我口頭上所說的鴿子,實(shí)例,就是一只具體的鴿子,怎么才能得到一只具體的鴿子呢?看下面的代碼
//用new 關(guān)鍵字來獲得一個實(shí)例 var gezi = new Bird();
現(xiàn)在我們就可以調(diào)用它的屬性,以及方法了

通過這樣的方法我們所得到的每一個鴿子其實(shí)都是一樣的,我們要怎么才得到有自己特征的鴿子呢?有自己獨(dú)有特征,其實(shí)就是屬性不一樣,那們我們就來改造一下函數(shù)的聲明
//其實(shí)我們只需要在這里小小地修改一下
function Bird(_color,_habitat,_weight){
this.name = "鴿子";
this.color = _color;
this.habitat = _habitat;
this.weight = _weight;
}
然后我們來看一下實(shí)例化一個鴿子的時候,怎么做
//我們現(xiàn)在就實(shí)例化了兩個鴿子
var gezi_A = new Bird("白色","野外","300克");
var gezi_B = new Bird("灰白色","溫室","550克");

這樣,我們就可以構(gòu)造出有自己特征的鴿子出來了,從上面的例子,我們其實(shí)已經(jīng)不難看出,封裝,其實(shí)就是把我們可以形容的對象用類來表示,我們就可通過new關(guān)鍵字來實(shí)例化出對象,這個對象就有自己獨(dú)立的屬性,行為,這樣的一個對象,我們就可以方便的供我們操作,封裝就是一種體現(xiàn)OOP的方法,我們先是封裝一個類,然后,再new 出實(shí)例,這樣寫就比我們直接用代碼來構(gòu)造兩次鴿子類少了很多的代碼,如果我們還構(gòu)造第3只鴿子,就再new 一次就可以了,構(gòu)造對象的時候,就感覺一句代碼的事。提高代碼的重用率,OOP就這樣體現(xiàn)出來了。
這時候,有人問了,只是在說我們用OOP的好處 ,還沒有看到不用OOP的代碼到底怎么寫,那們就來一個不用OOP的方式,同樣以鴿子為例
//聲明一個鴿子
function GeZi_C(){
console.log("種類是鴿子");
console.log("顏色是藍(lán)色");
console.log("住在樹梢上");
console.log("體重400克");
console.log("在天空中飛翔著");
}
//執(zhí)行一次
GeZi_C();

如果我們要再聲明100個鴿子,是不是要寫大量重復(fù)類似上面這樣的代碼呀,這就是面向過程的代碼。相信新手朋友們已經(jīng)有一個模糊的OOP概念了吧,慢慢體會,這種感覺不一兩天就能弄明白的,一口吃不成大胖子,后面我們還會繼續(xù)講OOP思想的繼承和多態(tài)。
繼續(xù)先前在聲明Bird類的時候,說的屬性和行為是同一級別,而且是可以用兩種方式來聲明,屬性在構(gòu)造函數(shù)里面用 this 關(guān)鍵字聲明,行為函數(shù)用 prototype 關(guān)鍵字來聲明,prototype就是函數(shù)原型鏈的標(biāo)準(zhǔn)擴(kuò)展,我們之所以這樣來寫,就是把javascript語言的使用代入高級語言的范疇,用來模擬高級語言的使用,扯遠(yuǎn)了,我們先來驗(yàn)證一下Bird實(shí)例對象中是不是擁有在同一級別的屬性跟行為函數(shù)
//我們現(xiàn)在是用的前面的沒有參數(shù)的Bird類
var obj = new Bird();
//逐一打印出來
for(var pro in obj){
console.log(pro + " : " + obj[pro]);
}

看到了吧,for...in就作用就是用來循環(huán)遍歷對象的屬性以及數(shù)組的下標(biāo),行為函數(shù)的名稱其實(shí)也是對象的屬性,現(xiàn)在就驗(yàn)證了前面的說法,相信大家現(xiàn)在對OOP的封裝思想有一定的認(rèn)知了。
總結(jié)一下,今天我們所講的東西其實(shí)就是把事物給抽象的擬態(tài)一下,然后,把這些屬性行為給封裝成一個類,使用new關(guān)鍵字實(shí)例化出具體對象,這樣大大地提高了代碼的使用率,提高了工作效率。
- 一個AJAX自動完成功能的js封裝源碼[支持中文]
- 一個js封裝的不錯的選項(xiàng)卡效果代碼
- Class Of Marquee Scroll通用不間斷滾動JS封裝類
- JS類的封裝及實(shí)現(xiàn)代碼
- js數(shù)據(jù)驗(yàn)證集合、js email驗(yàn)證、js url驗(yàn)證、js長度驗(yàn)證、js數(shù)字驗(yàn)證等簡單封裝
- 基于jquery封裝的一個js分頁
- 把jQuery的類、插件封裝成seajs的模塊的方法
- jquery自動將form表單封裝成json的具體實(shí)現(xiàn)
- 使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)
- javascript移動設(shè)備Web開發(fā)中對touch事件的封裝實(shí)例
相關(guān)文章
js控制輸入框獲得和失去焦點(diǎn)時狀態(tài)顯示的方法
這篇文章主要介紹了js控制輸入框獲得和失去焦點(diǎn)時狀態(tài)顯示的方法,可實(shí)現(xiàn)判斷輸入框的焦點(diǎn)狀態(tài)設(shè)置不同樣式的功能,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
Firefox getBoxObjectFor getBoundingClientRect聯(lián)系
Firefox在含有flash的網(wǎng)頁上提示:不建議使用 getBoxObjectFor() 。 請使用 element.getBoundingClientRect()。2008-10-10
javascript調(diào)試之DOM斷點(diǎn)調(diào)試法使用技巧分享
在開發(fā)中,偶爾會遇到類似這樣的問題:頁面上的一個DOM元素被改了屬性,但是我們卻不知道是哪個腳本更改的2014-04-04
JS使用單鏈表統(tǒng)計英語單詞出現(xiàn)次數(shù)
這篇文章主要為大家詳細(xì)介紹了JS使用單鏈表統(tǒng)計英語單詞出現(xiàn)次數(shù)的相關(guān)資料,列出所有單詞及其出現(xiàn)次數(shù),感興趣的小伙伴們可以參考一下2016-06-06
Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解
眾所周知Gulp.js 是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動執(zhí)行常見任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁模塊化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2018-01-01
淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)
本篇文章主要介紹了淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12

