Javascript中的物件導向

標籤：

 

 學習JS這麼長時間了，還是對其中物件導向的知識不太瞭解，最近抽出時間來總結一下，看一看JS中的對象世界。

 1.JS中的建立類

 在JS中建立類特別的容易，一般使用Function來聲明

<span style="font-family:SimSun;font-size:18px;"><script>        //建立類        function People()        {        }        //判斷類的類型        var someone = new People();        alert(someone instanceof People);                    </script></span>

 2.JS中的類的屬性

 建立了類，下面來看一下如何來自訂屬性

 

<span style="font-family:SimSun;font-size:18px;"><script>        //類的屬性        function People(name, sex)        {            this.name = name;            this.sex = sex;        }        var susan = new People("Susan", "female");        alert(susan.name);        alert(susan.sex);    </script></span>

 3.JS中的類的方法

 

<span style="font-family:SimSun;font-size:18px;"><script>        //類的方法        function People(name, sex) {            this.name = name;            this.sex = sex;            this.changeName = function (newName) {                this.name = newName;            }        }        var someone = new People("Susan", "female");        alert(susan.name);        someone.changeName("Lily");        alert(someone.name);           </script></span>

 4.JS中類的公有屬性和私人屬性

 在類中通過this指標添加的屬性均為公有屬性，私人屬性均為var

 

<span style="font-family:SimSun;font-size:18px;">  <!--共有屬性和私人屬性-->    <!--在類中通過this指標添加的屬性均為公有屬性。公有屬性是可以被外部存取的屬性-->    <script>        function People(ndame, sex, deposit) {            this.name = name;            this.sex = sex;            var deposit = deposit;            this.changeName = function (newName) {                this.name = newName;            }            this.consume = function (money) {                if (deposit >= money) {                    deposit -= money;                } else {                    throw new Error("沒有足夠存款");                }            }        }        var susan = new People("susan", "female", 1000);        var name = susan.name;        var deposit = susan.deposit; //訪問不了，私人屬性        alert(deposit);        try {            susan.consume(500);        } catch (e) {            alert(e.message);        }        try {            susan.consume(1000);        } catch (e) {            alert(e.message);        }    </script></span>

 5.公有方法和私人方法

 屬性有公有和私人之分，方法也是。概念類似。

 

<span style="font-family:SimSun;font-size:18px;"> <!--公有方法和私用方法-->    <script>        function People(name, sex, deposit) {            this.name = name;            this.sex = sex;            var deposit = deposit; //私人屬性            this.thew = 1;  //公有屬性            this.changeName = function (newName) {                this.name = newName;            }            this.consume = function (money) {                this.consume = function (money) {                    if (deposit >= money) {                        deposit -= money;                    } else {                        throw new Error("沒有足夠存款");                    }                }            }            var _this = this;//儲存當前對象到變數，_this中供私人方法使用            var digest = function (food) {   //私人方法digest                _this.thew++;   //匿名函數內，this指標指向會發生變化，因此程式中使用_this儲存People對象引用            }            this.eat = function (food) {   //公有方法eat                digest(food);            }        }    </script></span>

 6.靜態屬性和方法

 物件導向中也有靜態屬性和方法，看看JS是如何做到的

 

<span style="font-family:SimSun;font-size:18px;">  <!--靜態屬性和靜態方法-->    <!--建構函式本身就是對象，直接將屬性和方法添加到這個對象中，則可以達到靜態屬性和靜態方法的效果-->    <script>        function People() { }        People.staticProperty = "靜態屬性";  //靜態屬性        People.staticMethod = function () { }  //靜態方法    </script></span>

 7.原型對象

  原型對象就好像是一個對象定義的備份，當代碼引用屬性時，如果它並不存在於對象引用中，那麼就會 自動在愛原型中尋找這個屬性

<span style="font-family:SimSun;font-size:18px;"> <!--原型對象-->    <!--原型對象就好像是一個對象定義的備份，當代碼引用屬性時，如果它並不存在於對象引用中，那麼就會 自動在愛原型    中尋找這個屬性-->    <script>        function People(name, sex, deposit) {            this.name = name;            this.sex = sex;            var deposit = deposit; //私人屬性                              this.consume = function (money) {                this.consume = function (money) {                    if (deposit >= money) {                        deposit -= money;                    } else {                        throw new Error("沒有足夠存款");                    }                }            }            var _this = this;//儲存當前對象到變數，_this中供私人方法使用            var digest = function (food) {   //私人方法digest                _this.thew++;   //匿名函數內，this指標指向會發生變化，因此程式中使用_this儲存People對象引用            }            this.eat = function (food) {   //公有方法eat                digest(food);            }        }        People.prototype = {            thew: 1,            changeName: function (newName) {                this.name = newName;            }        }    </script></span>



Javascript中的物件導向