首頁  >  文章  >  web前端  >  Javascript之物件導向--方法

Javascript之物件導向--方法

高洛峰
高洛峰原創
2017-01-04 09:41:521144瀏覽

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之物件導向--封裝》謝謝對PHP中文網的支援!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn