1. 　　我们先看JS类的继承
  1.  <!DOCTYPE html>
    
 <html>

 <head>
    
     <meta charset="UTF-8">
    
         <title>JS类的继承</title>
    
 </head>

 <body>
    
     /* -- 类式继承 -- */
    
     <script type="text/javascript">
    
     //先声明一个超类
    
     var Animal = function(name) {
    
             this.name = name;
    
         }
    
         //给这个超类的原型对象上添加方法
    
     Animal.prototype.Eat = function() {
    
         console.log(this.name + " Eat");
    
     };
    
     //实例化这个超
    
     var a = new Animal("Animal");

     //再创建构造函数对象类
    
     var Cat = function(name, sex) {
    
             //这个类中要调用超类Animal的构造函数，并将参数name传给它
    
             Animal.call(this, name);
    
             this.sex = sex;
    
         }
    
         //这个子类的原型对象等于超类的实例
    
     Cat.prototype = new Animal();
    
     //因为子类的原型对象等于超类的实例，所以prototype.constructor这个方法也等于超类构造函数

     console.log(Cat.prototype.constructor);
    
     //这个是Animal超类的引用，所以要从新赋值为自己本身
    
     Cat.prototype.constructor = Cat;
    
     console.log(Cat.prototype.constructor);
    
     //子类本身添加了getSex 方法
    
     Cat.prototype.getSex = function() {
    
             return this.sex;
    
         }
    
         //实例化这个子类
    
     var _m = new Cat('cat', 'male');
    
     //自身的方法
    
     console.log(_m.getSex()); //male
    
     //继承超类的方法
    
     console.log(_m.Eat()); //cat
    
     </script>
    
 </body>

 </html>
  2. 　　我们再看JS原型继承 
     <!DOCTYPE html>
    
 <html>

 <head>
    
     <meta charset="UTF-8">
    
     <title>JS原型继承</title>
    
 </head>

 <body>
    
     <!--原型继承-->
    
     <script type="text/javascript">
    
     //clone()函数用来创建新的类Person对象
    
     var clone = function(obj) {
    
         var _f = function() {};
    
         //这句是原型式继承最核心的地方，函数的原型对象为对象字面量
    
         _f.prototype = obj;
    
         return new _f;
    
     }

     //先声明一个对象字面量
    
     var Animal = {
    
             somthing: 'apple',
    
             eat: function() {
    
                 console.log("eat " + this.somthing);
    
             }
    
         }
    
         //不需要定义一个Person的子类，只要执行一次克隆即可
    
     var Cat = clone(Animal);
    
     //可以直接获得Person提供的默认值，也可以添加或者修改属性和方法
    
     console.log(Cat.eat());
    
     Cat.somthing = 'orange';
    
     console.log(Cat.eat());

     //声明子类,执行一次克隆即可
    
     var Someone = clone(Cat);
    
     </script>
    
 </body>

 </html>

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

JS原型继承与类的继承的更多相关文章

  1. JS原型继承和类式继承

    前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...

  2. JS原型，原型链，类，继承，class，extends，由浅到深

    一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...

  3. js原生设计模式——2面向对象编程之继承—new类式继承

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. js原生继承之——类式继承实例(推荐使用)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. js原型链理解(4)-经典继承

    经典继承就是组合继承,就是组合构造函数和原型链的优点混合继承. 1.避免引用类型的属性初始化 2.避免相同方法的多次初始化 function Super(name){ this.ages = [100 ...

  6. java类为什么是单继承。类的继承，实现接口。

    java中提供类与类之间提供单继承. 提供多继承会可能出现错误,如:一个类继承了两个父类,而两个父类里面都有show()方法. class Fulei1{ public void show(){ Sy ...

  7. java继承2——类与继承（转）

    一.你了解类吗? 在Java中,类文件是以.java为后缀的代码文件,在每个类文件中最多只允许出现一个public类,当有public类的时候,类文件的名称必须和public类的名称相同,若不存在pu ...

  8. JavaScript 类式继承与原型继承

    交叉着写Java和Javascript都有2年多了,今天来总结下自己所了解的Javascript类与继承. Javascript本身没有类似Java的面向对象的类与继承术语,但其基于原型对象的思想却可 ...

  9. js类的继承

    1.类式继承 首先要做的是创建构造函数.按惯例,其名称就是类名,首字母应该大写.在构造函数中,创建实例属性要用关键字this .类的方法则被添加到prototype对象中.要创建该类的实例,只需结合关 ...

随机推荐

  1. JavaScript快速入门-ECMAScript本地对象(Array)

    Array对象 Array对象和python里面的list对象一样,是用来存储多个对象值的对象,且方法和属性基本上类似. 一.属性 lenght 二.方法  1.concat()  用于连接两个或多个 ...

  2. Reflux系列01：异步操作经验小结

    写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时器等.一旦应用涉及异步操作,代码便会变得复杂起来.在flux体系中,让人困惑的往往有几点: 异步操作应该在actions还是s ...

  3. Js_checkbox的互斥

    function ck_click(obj) { var ck_20 = document.getElementById("ck_20"); var ck_25 = documen ...

  4. PAT甲题题解-1120. Friend Numbers (20)-水题

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789775.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  5. SCRUM 12.17

    今天,我们的用户统计功能终于上线了!! 大家辛苦工作了许久.我们测试的用户统计功能效果模拟如下 还有一些好消息,比如,我们的应用在小米平台收到了崩溃的反馈报告. 这说明我们留下的一些BUG暴露了出来, ...

  6. Daily Scrumming* 2015.12.12（Day 4）

    一.团队scrum meeting照片 二.今日总结 姓名 WorkItem ID 工作内容 签入链接以及备注说明  江昊 任务1036 进行界面开发,明日准备开发第一个界面,社团展示界面 工作暂未完 ...

  7. 作业三：LINUX内核的启动过程

    作业三:LINUX内核的启动过程 一.使用GDB跟踪内核从start_kernel到init进程启动(附实验截图) (一)使用自己的Linux系统环境搭建MenuOS的过程 下载内核源代码编译内核 c ...

  8. alpha阶段的 postmortem 报告

    1. 每个成员到了第二次alpha 阶段与第一次相比,取得什么进步? 成员    黄杰 学会了app环境的搭建和代码的基本理解 李炫宗 更加明白安卓代码的编写和理解 康取 对安卓界面的设计有一些了解 ...

  9. 第一个sprint与第二个sprint阶段总结

    总体: 在第一个sprint中,团队里的小伙伴都在积极努力的配合,基本按照流程做了一次Sprint,大家一块进行计划会议,一块估计任务工时,但是还是有一些意外的事情,这段时间大家都没什么精力放在这门上 ...

  10. ElasticSearch 2 (11) - 节点调优（ElasticSearch性能）

    ElasticSearch 2 (11) - 节点调优(ElasticSearch性能) 摘要 一个ElasticSearch集群需要多少个节点很难用一种明确的方式回答,但是,我们可以将问题细化成一下 ...