我們可以試驗一下，JS類的繼承 children.constructor==father 返回的是true，而原型繼承children.constructor==father 返回的是false; ...
- 我們先看JS類的繼承
-
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>JS類的繼承</title> 7 </head> 8 9 <body> 10 /* -- 類式繼承 -- */ 11 <script type="text/javascript"> 12 //先聲明一個超類 13 var Animal = function(name) { 14 this.name = name; 15 } 16 //給這個超類的原型對象上添加方法 17 Animal.prototype.Eat = function() { 18 console.log(this.name + " Eat"); 19 }; 20 //實例化這個超 21 var a = new Animal("Animal"); 22 23 //再創建構造函數對象類 24 var Cat = function(name, sex) { 25 //這個類中要調用超類Animal的構造函數，並將參數name傳給它 26 Animal.call(this, name); 27 this.sex = sex; 28 } 29 //這個子類的原型對象等於超類的實例 30 Cat.prototype = new Animal(); 31 //因為子類的原型對象等於超類的實例，所以prototype.constructor這個方法也等於超類構造函數 32 33 console.log(Cat.prototype.constructor); 34 //這個是Animal超類的引用，所以要從新賦值為自己本身 35 Cat.prototype.constructor = Cat; 36 console.log(Cat.prototype.constructor); 37 //子類本身添加了getSex 方法 38 Cat.prototype.getSex = function() { 39 return this.sex; 40 } 41 //實例化這個子類 42 var _m = new Cat('cat', 'male'); 43 //自身的方法 44 console.log(_m.getSex()); //male 45 //繼承超類的方法 46 console.log(_m.Eat()); //cat 47 </script> 48 </body> 49 50 </html>
- 我們再看JS原型繼承
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>JS原型繼承</title> 7 </head> 8 9 <body> 10 <!--原型繼承--> 11 <script type="text/javascript"> 12 //clone()函數用來創建新的類Person對象 13 var clone = function(obj) { 14 var _f = function() {}; 15 //這句是原型式繼承最核心的地方，函數的原型對象為對象字面量 16 _f.prototype = obj; 17 return new _f; 18 } 19 20 //先聲明一個對象字面量 21 var Animal = { 22 somthing: 'apple', 23 eat: function() { 24 console.log("eat " + this.somthing); 25 } 26 } 27 //不需要定義一個Person的子類，只要執行一次克隆即可 28 var Cat = clone(Animal); 29 //可以直接獲得Person提供的預設值，也可以添加或者修改屬性和方法 30 console.log(Cat.eat()); 31 Cat.somthing = 'orange'; 32 console.log(Cat.eat()); 33 34 //聲明子類,執行一次克隆即可 35 var Someone = clone(Cat); 36 </script> 37 </body> 38 39 </html>
-
我們可以試驗一下，JS類的繼承 children.constructor==father 返回的是true，而原型繼承children.constructor==father 返回的是false;
