JavaScript面向對象是近年來比較火的一個概念了,由於小弟才疏學淺,雖然做過不少的web項目,看了網上很多深奧的資料和教程,還是對他們深奧的理論一知半解,前段時間看了點書,總算有了自己的理解,今天也出來裝一回,如果覺得很深奧,請直接鄙視我,如果覺得不對,請直接拍磚。
先通俗了解下面一些東西。
在JS代碼中寫入function fn(){}或者var fn=function(){}等等,你都可以將其理解為對象,當然還有數組等等。
在理解面向對象之前,先了解下面幾個東西吧。
1.對象方法的調用
在js最外層寫的function可以還可以理解為window對象的一個方法。定義的變量也可以稱之為window對象的一個屬性。例如:
var test=function(){ alert("123") } 當然上面的你也可以這樣定義 function test(){ alert("123") }
作為window對象的方法我們可以這樣調用
test()//彈出警告框123(因為window對象是頂級對象我們可以將其省略)
window.test()//彈出警告框123
window['test']()//彈出警告框123,可以將test理解為window數組對象下面的一個方法值。
通過以上的例子大致了解了對象的方法怎使用和調用。
2,私有方法
私有方法就是只有在對象內部作用域內部才能使用的方法。可以用變量作用域的方式來理解這個東西。
上面例子的function都可以理解為window對象的私有方法。繼續看下面的例子。
var pet=function(){ function showpet(){ alert("123") } showpet();//私有方法可以在函數作用域范圍內使用。 var temp="私有變量只有在函數或者對象作用域范圍內能訪問" } showpet();//會出錯 pet.showpet()//還是不能這樣調用 var Penguin=new pet() //實例化一個pet對象 Penguin.showpet()//不好意思這樣子還是不能讓你調用。
如果我想定義的方法可以對象的作用域外面調用該怎麼辦呢?我該怎麼使用私有方法呢?我們來看下一點內容吧。
3.靜態方法
帶著上面的問題我們繼續上面的例子。
var pet=function(){ function showpet(){//私有方法 alert("123") } showpet();//私有方法可以在函數作用域范圍內使用。 } pet.show=function(){//給pet對象添加一個靜態方法。 alert("456") } pet.name="Penguin"//給pet對象添加一個靜態屬性。 pet.show()//彈出警告框456 alert(pet.name)//彈出警告框Penguin //繼續思維碰撞 ===================== var Penguin=new pet() //實例化一個pet對象 Penguin.show()//不好意思,這個靜態方法好像沒有被實例繼承。有這種思路值得表揚啊,加油!
上面的實例向你展示了什麼叫靜態方法,當然你可能會不明白,其實我也不懂,因為我也是菜鳥,但是只要你看了以後知道怎樣為對象寫一個靜態方法,怎麼調用該靜態方法就可以了,也許某一天,你突然明白了就會回來教我了。帶著上面的問題我們來看看實例化的對象能調用的方法。
4.公有方法
公有方法通常是通過修改構造函數的原型來實現的,修改一個對象的原型以後,所有該對象實例都會繼承原型的修改(這句話極為裝B,如果你感覺模糊就請忽略)。
修改對象原型的方法,繼續上面的例子。
pet.prototype.setname=function(str){//通過修改原型添加一個公有方法,用於添加修改實例對象的name name=str; }
看例子:
var pet=function(){ function showname(){//私有方法 alert(this.name) } this.show=function(){ //如果這裡不理解,請注意這個方法下面就要介紹了。 showname(); } } pet.prototype.setname=function(str){ name=str; } var Penguin=new pet() Penguin.setname("Penguin");//添加實例的name值為Penguin Penguin.show(); //彈出Penguin Penguin.setname("wind");//添加實例的name值為wind Penguin.show(); //彈出wind
運行代碼玩玩。
<script> var pet=function(){ name:"123", function showname(){//私有方法 alert(this.name) } this.show=function(){ showname(); } } pet.prototype.setname=function(str){ name=str; } var Penguin=new pet() Penguin.setname("Penguin"); Penguin.show(); Penguin.setname("wind"); Penguin.show(); </script>
5.特權方法(對象或者函數對外的接口)
其實在上面的例子中我們已經用到了這種方法。這種方法可以被實例化的對象繼承所調用。通過在構造函數內部通過thsi關鍵字定義的的方法。特權方法能夠在構造函數外面公開訪問(僅限於實例化的對象),而且還能夠訪問私有成員和方法,因此用來做為對象或者構造函數的接口最合適不過了,通過特權函數我們可以控制公有方法對私有方法的訪問,這個在JS框架的擴展中有很多應用。
各位看官可以當上面的是一段P話,我們具體來看看怎麼樣定義一個特權方法,怎樣引用一個特權方法,繼續調用上面得實例來看。
var pet=function(){ function showname(){//私有方法 alert(this.name) } this.show=function(){//通過使用this關鍵字定義一個特權方法。 showname(); //在特權方法中訪問私有方法; } } pet.prototype.setname=function(str){ name=str; } var Penguin=new pet();//實例化一個pet對象 Penguin.setname("Penguin");//調用公有方法修改 Penguin.show(); //調用特權方法訪問私有方法,彈出name
首先通過在構造函數中用this.fn=function(){}建立一個特權方法。在特權函數中訪問私有方法;
實例化的對象可以通過訪問特權函數來使用部分私有方法,訪問特權函數的方法同訪問公有函數。
第一部分就暫時理解到這裡了,下一部分會通過一個實例來诠釋下面向對象是怎麼裝B的。
以上就是本文的全部內容,希望對大家有所幫助,感興趣的朋友可以看下《Javascript之面向對象--封裝》謝謝對的支持!