一,物件導向的基礎
對象是JavaScript的基礎。從最基本的層次上說,對象是一系列屬性的集合。
1,對象的建立
<script type="text/javascript"> //建立一個新的Object對象,存放在obj變數中 var obj1 = new Object(); //設定屬性 obj1.value = 5; obj1.click = function(){ alert("Hello"); } //另一種方式定義一個對象,以索引值(key/value)的方式定義屬性 var obj2 = { value : 5, click : function(){ alert("Hello"); } }; </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
相信很多朋友對這些建立對象的方式接觸過很多次了,都很熟悉了。
2,對象的使用
和其他物件導向語言不同的是,JavaScript沒有類的概念。在JavaScript裡,任何函數都可以被執行個體化為一個對象。
<script type="text/javascript"> //一個簡單的函數,接受名稱並將其放入當前上下文中 function User(name){ this.name = name; } var me = new User("cssrain");//指定名稱來建立該函數的一個新對象 alert( me.name );//"cssrain" alert( me.constructor == User );//true //如果把User當作函數 User("peter"); alert( window.name );//因為它的this內容物件未設定,所以預設是全域的window對象 </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
本段代碼通過new User()來建立函數的一個新的對象。建立出的新對象擁有name屬性,並且construtor屬性指向建立它的函數。
3,公用方法
公用方法是在對象的上下文中使用者始終可以接觸到的。要實現這種方法,需要用到原型屬性——prototype。
對象的原型仍然是對象。給原型對象添加屬性後,由該原型執行個體化的每個對象都可以訪問這些屬性,即這些屬性都是公有化的。
<script type="text/javascript"> //一個簡單的函數,接受名稱並將其放入當前上下文中 function User(name){ this.name = name; } //將一個新的函數添加到此對象的prototype對象中 User.prototype.getName = function(){ return this.name; } var me = new User("cssrain");//指定名稱來建立該函數的一個新對象 alert( me.getName() ); //"cssrain" </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
4,私人方法
這個還比較好理解。字面意思是只能在內部訪問。
<script type="text/javascript"> //一個簡單的函數,接受名稱並將其放入當前上下文中 function User(name){ this.name = name; function disp(){ alert("User()函數 私人的"); } //只能內部調用 disp(); } var me = new User("cssrain");//指定名稱來建立該函數的一個新對象 //me.disp();//不能調用 //disp();//不能調用 </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
5,特權方法
它是以公用的方式訪問私人變數。
<script type="text/javascript"> function User(name,age){ //私人變數 var year = (new Date()).getFullYear()-age; //建立一個特權方法,能夠訪問year變數,同時屬於公用可訪問 this.getBornYear = function(){ return year; } } var me = new User("cssrain",22);//指定參數來建立該函數的一個新對象 alert( me.getBornYear() );//"1986" </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
本質上,特權方式是動態產生的。因為它們是在運行時才添加到對象中的,而不是在代碼第一次編譯時間就已經產生。
這種動態產生代碼的能力不可小視,能根據與你想那個時變數來產生代碼是非常有用的。看下面動態產生方法的例子:
<script type="text/javascript"> function User( users ){ for(var i in users){//遍曆所有的屬性 (function(method){ var p = i; method["get"+p]=function(){//建立此屬性的一個讀取函數 return users[p]; } method["set"+p]=function(val){//建立此屬性的一個設定函數 users[p] = val; } })(this); } } var me = new User({name : "cssrain", age : 22});//指定參數來建立該函數的一個新對象 alert( me.getname() );//"cssrain" alert( me.getage() );//"22" me.setname("changeCssRain"); me.setage(23); alert( me.getname() );//"changeCssRain" alert( me.getage() );//"23" </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
6,靜態方法
靜態方法的實質跟一般函數沒有什麼不同,靜態方法能保證對象的命名空間的整潔。
<script type="text/javascript"> function User(name,age){ this.name = name; this.age = age; } //添加到一個User對象的靜態方法 User.cloneUser = function(user){ //建立並返回一個新的User對象 return new User( user.name , user.age ); } var u = User.cloneUser({name:"cssrian",age:22}); alert(u.name);//"cssrain" alert(u.age);//22 </script>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
二,小結
理解本章所描述的概念和內容是非常重要的, 這是完全掌握專業JavaScript的起點。