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. stm32f051 DMA需要注意的一点

    STM32f051的DMA注意事项 问题说明:在使用ADC的DMA通道时,遇到了序列转换的乱序问题,我使用的是DMA循环模式,但是采集的数据却总是错的:第二个内存地址存放的是ADC序列转换中的第一个通 ...

  2. R实战 第九篇：数据标准化

    数据标准化处理是数据分析的一项基础工作,不同评价指标往往具有不同的量纲,数据之间的差别可能很大,不进行处理会影响到数据分析的结果.为了消除指标之间的量纲和取值范围差异对数据分析结果的影响,需要对数据进 ...

  3. 设计模式 笔记 抽象工厂模式 Abstract Factory

    //---------------------------15/04/09---------------------------- //Abstract Factory 抽象工厂----对象创建型模式 ...

  4. 【Android UI设计与开发】第04期：引导界面（四）仿人人网V5.9.2最新版引导界面

    这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一种给人眼前一 ...

  5. 《深入浅出NodeJS》mindmap

    接触NodeJS有快两年了,但因为和我的工作内容关系不大,所以一直没有系统的学习.最近终于有空能系统地了解学习一下这门技术,于是买了一本朴灵老师的<深入浅出NodeJS>仔细研读.这本书内 ...

  6. npm install的几种命令形式区别

    转自未来与传说.jigetage 我们在使用 npm install 安装模块的时候 ,一般会使用下面这几种命令形式: npm install moduleName # 安装模块到项目目录下 npm ...

  7. VMware下三种网络连接模式介绍

    birdged(桥接) 桥接网络是指本地物理网卡和虚拟网卡通过VMnet0虚拟交换机进行桥接,物理网卡和虚拟网卡在拓扑图上处于同等地位,那么物理网卡和虚拟网卡就相当于处于同一个网段,虚拟交换机就相当于 ...

  8. LintCode——全排列

    描述:给定一个数字列表,返回其所有可能的排列. 样例:给出一个列表[1,2,3],其全排列为:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 说明: ...

  9. LeetCode-51.N皇后

    n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回所有不同的 n 皇后问题的解决方案. 每一种解 ...

  10. 1086. Tree Traversals Again (25)-树的遍历

    题意:用栈的push.pop操作给出一棵二叉树的中序遍历顺序,求这棵二叉树的后序遍历. 需要一个堆结构s,一个child变量(表示该节点是其父亲节点的左孩子还是右孩子),父亲节点fa对于push v操 ...