本篇內(nèi)容主要講解“js中的面向?qū)ο笫鞘裁础?,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“js中的面向?qū)ο笫鞘裁础卑?
成都創(chuàng)新互聯(lián)是專業(yè)的掇刀網(wǎng)站建設(shè)公司,掇刀接單;提供成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行掇刀網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
什么是對象
我們先來看高程三中是如何對對象進行定義的
"無序?qū)傩缘募?,其屬性可以包括基本值、對象或者函?shù)",對象是一組沒有特定順序的的值。對象的沒個屬性或方法都有一個俄名字,每個名字都映射到一個值。
簡單來理解對象就是由屬性和方法來組成的
面向?qū)ο蟮奶攸c
封裝
對于一些功能相同或者相似的代碼,我們可以放到一個函數(shù)中去,多次用到此功能時,我們只需要調(diào)用即可,無需多次重寫。
在這里我們可以理解為創(chuàng)造對象的幾種模式:單例模式,工廠模式,構(gòu)造函數(shù)模式,原型模式等。
繼承
子類可以繼承父類的屬性和方法
多態(tài)(重載和重寫)
重載:嚴(yán)格意義上說js中沒有重載的功能,不過我們可以通過判斷函數(shù)的參數(shù)的不同來實現(xiàn)不同的功能來模擬重載。
重寫:子類可以改寫父類的屬性和方法
javascript中的封裝
單例模式
小王在一個小公司,就自己一個前端,所以他寫js都是這樣的
var a = 1; function getNum(){ return 1; }
后來公司又招了個前端小明,于是變成他們2個一起寫同一個js了。一天小王發(fā)現(xiàn)自己寫的getNum方法出問題了,原來是小華寫的js中也有個getNum的函數(shù),代碼合并后把他的覆蓋掉了,于是便找小華理論去,經(jīng)過一番妥協(xié)后,兩人都把自己的代碼改了改
var xiaoming = { num:1, getNum:function(){ return 1; } } var xiaohua = { num:2, getNum: function(){ return 2; } }
這就是我們所謂的單例模式(命名空間)
我們把描述同一個事物的方法或者屬性放到同一個對象里,不同事物之間的方法或者屬性名相同相互也不會發(fā)生沖突。
單例模式的優(yōu)劣
1.使用單例模式,我們可以實現(xiàn)簡單的模塊化開發(fā)
var utils = { getCss:function(){ //code }, getByClass:function(){ //code }, setCss:function(){ //code } }
我們可以把自己寫好的工具方法放到一個單獨的js文件中,然后直接引入即可。
2.避免了全局變量名的沖突
需要注意的是,我們在引入各個模塊的時候,需要注意引入的順序,引入順序是按照各模塊之間的相互依賴進行前后排列的;
3.缺點:
單例模式只是一定程度上避免了變量名的沖突,但并不能徹底解決此問題,而且在不同的對象下,我們可能會有很多功能相同的代碼,最終造成大量的冗余代碼。
單例模式讓每個對象有了自己獨立的命名空間,但是并不能批量生產(chǎn)的問題,每一個新的對象都要重新寫一份一模一樣的代碼。
var person1 = { name:'小明', age:24, showName:function(){ console.log('我的名字是:'+this.name) } }; var person1 = { name:'小華', age:25, showName:function(){ console.log('我的名字是:'+this.name) } };
工廠模式
1.工廠模式其實就是把需要一個個的編寫的對象,放在一個函數(shù)中統(tǒng)一的進行創(chuàng)建,說白了就是普通函數(shù)的封裝。
2.工廠模式總共3步驟:
1)引進原材料 --- 創(chuàng)建一個空對象
2)加工原材料 --- 加工對象:給對象添加屬性和方法;
3)輸出產(chǎn)品 --- 返回對象:return 對象;
function CreatePerson(name,age){ var obj={};//1.創(chuàng)建一個空對象 //2.加工對象 obj.name=name; obj.age=age; obj.showName=function(){ console.log('我的名字是:'+this.name) }; return obj;//3.輸出對象; } var person1 = CreatePerson('小明',23) var person2 = CreatePerson('小華',23) person1.showName(); //我的名字是:小明 person2.showName(); //我的名字是:小華
工廠模式的優(yōu)缺點
既然叫工廠模式,它就和我們周圍的工廠一樣,我們只需要把原材料放進去,就能得到我們需要的產(chǎn)品了。
工廠模式也解決了單例模式的批量生產(chǎn)的問題,避免了單例模式中的大量冗余代碼,進行系統(tǒng)的封裝,提高代碼的重復(fù)利用率
不過工廠模式跟我們js內(nèi)置類的調(diào)用方法不同
構(gòu)造函數(shù)模式
可以創(chuàng)建一個自定義的類,并且可以new出實例
構(gòu)造函數(shù)做的就是類和實例打交道。
//構(gòu)造函數(shù):首字母大寫(約定俗成); function CreatePerson(name,age){ //創(chuàng)建一個自定義的類 //構(gòu)造函數(shù)中的this,都是new出來的實例 //構(gòu)造函數(shù)中存放的都是私有的屬性和方法; this.name=name; this.age=age; this.showName=function(){ console.log('我的名字是:'+this.name) } } //實例1 var person1 = new CreatePerson('小明',25) //實例2 var person2 = new CreatePerson('小華',24)
這里說一下工廠模式和構(gòu)造函數(shù)模式的區(qū)別:
1. 在調(diào)用的時候不同:
工廠模式:調(diào)用的時候,只是普通函數(shù)的調(diào)用createPerson();
構(gòu)造函數(shù)模式:new CreatePerson();
2. 在函數(shù)體內(nèi)不同:
工廠模式有三步:1)創(chuàng)建對象 2)加工對象 3)返回對象;
構(gòu)造函數(shù)模式只有1步: 只有加工對象; 因為系統(tǒng)默認(rèn)會為其創(chuàng)建對象和返回對象;
3. 構(gòu)造函數(shù)默認(rèn)給我們返回了一個對象,如果我們非要自己手動返回的話:
(1)手動返回的是字符串類型:對以前實例上的屬性和方法沒有影響;
(2)手動返回的是引用數(shù)據(jù)類型:以前實例身上的屬性和方法就被覆蓋了;實例無法調(diào)用屬性和方法;
構(gòu)造函數(shù)的方法都是私有方法,每個實例調(diào)用的都是自己私有的方法,同樣也會有許多重復(fù)的代碼。
我們可以使用原型模式來解決每個實例中都有相同方法的函數(shù)的問題
原型模式
function CreatePerson(name,age){ this.name=name; this.age=age; } // 我們把公有的方法放到函數(shù)的原型鏈上 CreatePerson.prototype.showName = function(){ console.log('我的名字是:'+this.name) } var person1 = new CreatePerson('小明',25) var person2 = new CreatePerson('小華',24) person1.showName() //小明
###### 原型模式的關(guān)鍵:
1)每個函數(shù)數(shù)據(jù)類型(普通函數(shù),類)上,都有一個屬性,叫prototype。
2)prototype這個對象上,天生自帶一個屬性,叫constructor:指向當(dāng)前這個類;
3)每個對象數(shù)據(jù)類型(普通對象,prototype,實例)上都有一個屬性,
叫做__proto__:指向當(dāng)前實例所屬類的原型;
這3句話理解了,下邊的東西就可以不用看了 //手動滑稽
通過例子我們來看這幾句話是什么意思
function CreatePerson(name,age){ this.name=name; this.age=age } CreatePerson.prototype.showName=function(){ console.log('我的名字是:'+this.name) } var person1 = new CreatePerson('小明',25); console.dir(person1)
在chrome瀏覽器控制臺中顯示
http://weahome.cn/article/jsejog.html