码迷,mamicode.com
首页 > Web开发 > 详细

JS原型继承与类的继承

时间:2016-04-07 13:19:21      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

  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;

JS原型继承与类的继承

标签:

原文地址:http://www.cnblogs.com/huaxili/p/5362941.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!