JavaScript面向對象之實現繼承的5種方法

時間 2019-11-12
標籤 javascript 面向對象實現繼承方法欄目 JavaScript 简体版
原文原文鏈接
  1 <html>
  2     <head></head>
  3     <body>
  4         <script type="text/javascript">
  5         
  6         /*
  7             如下爲文檔原話：
  8                 ECMAScript實現繼承的方式不止一種。
  9                 這是由於 JavaScript 中的繼承機制並非明確規定的，而是經過模仿實現的。這意味着全部的繼承細節並不是徹底由解釋程序處理。
 10                 做爲開發者，你有權決定最適用的繼承方式。
 11             
 12             
 13             在JavaScript中實現繼承的方法：
 14                 1. 對象冒充
 15                 2. call()
 16                 3. apply()
 17                 4. 原型鏈（prototype chaining）
 18                 5. 混合方式
 19             
 20         */
 21         
 22         
 23         /* 實現繼承方法1 --- 【對象冒充】 */
 24         
 25         //父類
 26         function Person(name,age)
 27         {
 28             this.name = name;
 29             this.age = age;
 30             
 31             this.show = function()
 32             {
 33                 window.alert(this.name+"..."+this.age);
 34             }
 35         }
 36         
 37         Person.prototype.sayHi = function(){
 38             alert("hi");
 39         }
 40         
 41         
 42         //子類
 43         function Student(name,age)
 44         {
 45             this.student = Person;    //將Person類的構造函數賦值給this.student
 46             this.student(name,age); //js中其實是經過對象冒充來實現繼承的
 47             delete this.student;    //移除對Person的引用
 48         }
 49         
 50         var s = new Student("小明",17);
 51         s.show();
 52         //s.sayHi(); //對象冒充不能繼承prototype內容            
 53         
 54         var p = new Person("小明",17);
 55         p.show();
 56         p.sayHi();
 57         
 58         
 59         //子類2
 60         function MidStudent(name,age)
 61         {
 62             this.midstudent = Person;
 63             this.midstudent(name,age);
 64             
 65             //實現方法重載
 66             this.show = function()
 67             {
 68                 window.alert("midstudent show()");
 69             }
 70         }
 71         
 72         var m = new MidStudent("張三",11);
 73         m.show();
 74         
 75         
 76         
 77         
 78         
 79         
 80             
 81         /* 實現繼承方法2 --- 【call方法】 */
 82         
 83         /* call()方法是與經典的對象冒充方法最類似的方法
 84             【第一個參數】用做 this 的對象。
 85             【其餘參數】直接傳遞給函數自身。
 86         */
 87     
 88         function sayColor(sPrefix,sSuffix) {
 89             alert(sPrefix + this.color + sSuffix);
 90         };
 91 
 92         var obj = new Object();
 93         obj.color = "blue";
 94 
 95         
 96         //理解：將sayColor中本來的this替換成了obj的this
 97         //最後生成的消息 "The color is blue, a very nice color indeed." 將被顯示出來
 98         sayColor.call(obj, "The color is ", "a very nice color indeed.");
 99         
100         
101         
102         
103         
104         /* 實現繼承方法3 --- 【apply方法】 */    
105         
106         //apply() 方法有兩個參數 
107         //    第一個參數：【用做 this 的對象】 
108         //    第二個參數：【要傳遞給函數的參數的數組】
109 
110         function sayColor(sPrefix,sSuffix) {
111             alert(sPrefix + this.color + sSuffix);
112         };
113 
114         var obj = new Object();
115         obj.color = "blue";
116 
117         //理解：將sayColor中本來的this替換成了obj的this
118         sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
119 
120         
121         
122         
123         
124         
125         /* 實現繼承方法4 --- 【原型鏈】    */        
126         
127         function ClassA() {}
128 
129         ClassA.prototype.color = "blue";
130         ClassA.prototype.sayColor = function () {
131             alert(this.color);
132         };
133 
134         function ClassB() {
135         }
136         
137         //繼承ClassA的原型內容 
138         /*注意：
139             一、原型鏈和對象冒充不一樣，原型鏈除了繼承prototype的內容也能繼承ClassA函數內的方法（注意：若是方法中含有this的引用，會出現undefined，能夠經過對象冒充來解決該問題）
140             二、原型鏈不能像 call和apply同樣將父類對象this改成子類對象this
141             三、若是要使用原型鏈，那麼前提是父類是使用原型定義的
142         */
143         ClassB.prototype = new ClassA();
144         
145 
146 
147         
148         
149         /* 實現繼承方法5 --- 【混合方式】 */
150         
151         function ClassA(sColor) {
152             this.color = sColor;
153         }
154 
155         //類1：給ClassA類加入sayColor方法 注意：對象冒充沒法繼承prototype加入的內容
156         ClassA.prototype.sayColor = function () {
157             alert(this.color);
158         };
159 
160         
161         
162         //類2：使用對象冒充方式繼承ClassA
163         function ClassB(sColor, sName) {
164             ClassA.call(this, sColor); 
165             this.name = sName;
166         }
167     
168         //重點注意：這裏是將ClassB的原型繼承ClassA
169         ClassB.prototype = new ClassA();
170         
171         //給ClassB類加入sayName方法
172         ClassB.prototype.sayName = function () {
173             alert(this.name);
174         };
175         
176         
177             
178         
179         </script>
180     </body>
181 </html>