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. USART_GetITStatus和USART_GetFlagStatus的区别

    USART_GetITStatus()和USART_GetFlagStatus()的区别 都是访问串口的SR状态寄存器,唯一不同是,USART_GetITStatus()会判断中断是否开启,如果没开启 ...

  2. python 优雅地实现插件架构

    近日,决定用 python 实现插件架构,于是上 stackoverflow 逛了一下,在这里发现一段代码,非常喜欢. 提醒各位大侠注意,我对这段代码作了一点小小的改动:原 PLUGINS 是 lis ...

  3. [Zlib]_[初级]_[使用zlib库压缩和解压STL string]

    场景 1.一般在使用文本json传输数据, 数据量特别大时,传输的过程就特别耗时, 因为带宽或者socket的缓存是有限制的, 数据量越大, 传输时间就越长. 网站一般使用gzip来压缩成二进制. 说 ...

  4. 解决：Linux SSH Secure Shell(ssh) 超时断开的解决方法

    转载:http://www.cnblogs.com/jifeng/archive/2011/06/25/2090118.html 修改/etc/ssh/sshd_config文件,找到 ClientA ...

  5. [LOJ#6039].「雅礼集训 2017 Day5」珠宝[决策单调性]

    题意 题目链接 分析 注意到本题的 \(C\) 很小,考虑定义一个和 \(C\) 有关的状态. 记 \(f(x,j)\) 表示考虑到了价格为 \(x\) 的物品,一共花费了 \(j\) 元的最大收益. ...

  6. [UOJ#276][清华集训2016]汽水[分数规划+点分治]

    题意 给定一棵 \(n\) 个点的树,给定 \(k\) ,求 \(|\frac{\sum w(路径长度)}{t(路径边数)}-k|\)的最小值. \(n\leq 5\times 10^5,k\leq ...

  7. 设计模式 笔记 迭代器模式 Iterator

    //---------------------------15/04/26---------------------------- //Iterator 迭代器模式----对象行为型模式 /* 1:意 ...

  8. AngularJS + CoffeeScript 前端开发环境配置详解

    AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...

  9. 转 Git 常用命令大全

    一. Git 常用命令速查 git branch 查看本地所有分支 git status 查看当前状态  git commit 提交  git branch -a 查看所有的分支 git branch ...

  10. python3与python2使用python原生SimpleHTTPRequestHandler

    python3 使用时如下: #!/usr/bin/env python3 #coding=utf-8 from http.server import SimpleHTTPRequestHandler ...