- 我们先看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;