JS OOP -03 JS類的實現

JS類的實現：

a.理解類的實現機制

b.使用prototype對象定義類成員

c.一種JS類的設計模式

 

a.理解類的實現機制

 　　在JS中可使用function關鍵字來定義一個類。

　　添加類的成員，在函數內經過this指針引用的變量或者方法都會成爲類的成員。

　　　　　　　function class1(){
                var s = "abc";
                this.p1=s;
                this.Method1=function(){
                    alert("this is a test method");
                }
            }
            
            var obj1=new class1();//
            
            //在JS中,function自己的定義就是類的構造函數。
            /*
             * new 建立對象的過站
             * 1）當解釋器遇到new操做符時便建立一個空對象；
             * 2）開始運行class1這個函數，並將其中的this指針都指向這個新建的對象；
             * 3）由於當給對象不存在的屬性賦值時，解釋器就會爲對象建立該屬性，例如在class1中，當執行到this.p1=s這條語句時，
             *       就會添加一個屬性p1,並把變量s的值賦給它，這樣函數執行就是初始化這個對象的過程，即實現構造函數的做用。
             * 4）當函數執行完後,new操做符就返回初始化後的對象。
             * 
             * 經過這整個過程，JS中就實現了面向對象的基本機制。因而可知，在JS中，function的定義實際上就是實現一個對象的構造器，
             * 是經過函數來完成的，這種方式的缺點：
             * 1）將全部的初始化語句，成員定義都放到一塊兒，代碼邏輯不夠清晰，不易實現複雜的功能。
             * 2）每建立一個類的實例，都要執行一次構造函數。構造函數中定義的屬性和方法總被重複的建立。
             *    例如：this.Method1=function(){
                          alert("this is a test method");
                        }
                  這裏的Method1每建立一個class1的實例，都會被建立一次，形成了內存的浪費。(prototype對象能夠解決相關缺點。)
             */

 

b.使用prototype對象定義類成員

　　　　　　　function class1(){
                this.prop=1;
            };
            
            class1.prototype.showProp=function(){//使用函數的prototype屬性給類定義新成員
                alert(this.prop);
            }
            
            var obj1=new class1();
            obj1.showProp();//調用經過prototype原型對象定義的showProp方法
            
            /*
             * prototype是一個js對象，能夠爲prototype對象添加，修改，刪除方法和屬性。從而爲一個類添加成員定義。
             * 瞭解了函數的prototype對象，在來看new的執行過程：
             * 1）建立一個新的對象，並讓this指針指向它。
             * 2）將函數的prototype對象的全部成員都賦給這個新對象
             * 3）執行函數體，對這個對象進行初始化操做
             * 4）返回1中建立的對象
             * 
             * 和以前new的執行過程相比，多了用prototype來初始化對象的過程，這也和prototype的字面意思相符，它是所對應類的
             * 實例的原型。這個初始化過程發生在函數體（構造器）執行以前，因此能夠在函數體內調用prototype中定義的屬性和方法！
             * 
             */
            
            function class2(){
                this.prop=1;
                this.showProp();
            };
            class2.prototype.showProp=function(){//使用函數的prototype屬性給類定義新成員
                alert(this.prop);
            }
            var obj2=new class2();
            //PS:原型對象的定義必須在建立類實例的語句以前，不然它將不會起做用。
            
            
            //prototype對象運用於設計類的成員，它是和一個類緊密相關的！
            //prototype還有一個重要的屬性：constructor,表示對該構造函數的引用.
            function class3(){
                alert(123);
            }
            class3.prototype.constructor();//調用類的構造函數,等同於: class.prototype.constructor()==class1;

 

c.一種JS類的設計模式

　　　　　　　　/*
             * 在JS中,因爲對象靈活的性質，在構造函數中也能夠爲類添加成員，在增長靈活性的同時，也增長了代碼的複雜度。
             *爲例提供代碼的可讀性和開發效率，能夠採用這種定義成員的方式：使用prototype對象來替代，這樣function的定義就是類的
             * 構造函數，符合傳統意義類的實現（類名和構造函數名是相同的）。
             */
            
            
            //第一種方式
            function class1(){
                //構造函數
            };
            class1.prototype.somePropety='sample';
            class1.prototype.someMethod=function(){
                //
            };
            //以上這種方式很清晰，但每定義一個屬性或方法，都須要使用一次class1.prototype，不只代碼體積變大，並且易讀性不夠
            
            
            //第二種方式（推薦）
            //進一步改善，可使用無類型對象的構造方法來指定prototype對象，從而實現類的成員定義
            function class2(tt){
                //構造函數
                this.somePropety=tt;
            }
            class2.prototype={//經過指定prototype對象來實現類的成員定義
                somePropety:'sample',
                someMethod:function(){
                    //...
                }
                //anything alse
            }
            /*
             * 以上，很清晰的定義了class1,構造函數直接用類名來實現，而成員使用無類型對象來定義，以列表的方式實現了全部屬性和
             * 方法，而且能夠在定義的同時初始化屬性的值。這也更像傳統意義面嚮對象語言中類的實現。只是構造函數和類的成員定義被
             * 分爲兩個部分，這可當作JS中定義類的一個固定模式，這樣在使用時會更加容易理解。
             * 
             * 注意：在一個類的成員之間互相引用，必須經過this指針類進行，例如在上面例子中的someMethod方法中，若是使用屬性
             * somePropety，必須經過this.somePropety的形式，由於在JS中每一個屬性和方法都是獨立的，它們經過this指針聯繫在一個
             * 對象上！！！
             */