JavaScript中級筆記(5)

一，物件導向的基礎

     對象是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>

     相信很多朋友對這些建立對象的方式接觸過很多次了，都很熟悉了。

 

     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>

     本段代碼通過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>

    

     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>

     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>

     本質上，特權方式是動態產生的。因為它們是在運行時才添加到對象中的，而不是在代碼第一次編譯時間就已經產生。

     這種動態產生代碼的能力不可小視，能根據與你想那個時變數來產生代碼是非常有用的。看下面動態產生方法的例子：

<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>

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>

     二，小結   

     理解本章所描述的概念和內容是非常重要的， 這是完全掌握專業JavaScript的起點。