JS原型继承与类的继承

  1. 　　我们先看JS类的继承

 

  1.  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>

     

  2. 　　我们再看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>

     

  3. 我们可以试验一下，JS类的继承 children.constructor==father 返回的是true，而原型继承children.constructor==father 返回的是false;

posted @ 2016-04-07 12:03  花溪立  阅读(345)  评论(0)  编辑  收藏  举报