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. proftpd启动失败提示unable to determine IP address of “xxx.com”

    proftpd启动失败提示unable to determine IP address of “xxx.com”这种proftpd启动失败的原因是无法解析后面主机的IP地址,解决方法是在DNS列表中增 ...

  2. [BZOJ4144][AMPPZ2014]Petrol[多源最短路+MST]

    题意 题目链接 分析 假设在 \(a \rightarrow b\) 的最短路径中出现了一个点 \(x\) 满足到 \(x\) 最近的点是 \(c\) ,那么我们完全可以从 \(a\) 直接走到 \( ...

  3. grunt源码解析：整体运行机制&grunt-cli源码解析

    前端的童鞋对grunt应该不陌生,前面也陆陆续续的写了几篇grunt入门的文章.本篇文章会更进一步,对grunt的源码进行分析.文章大体内容内容如下: grunt整体设计概览 grunt-cli源码分 ...

  4. Jq_$.getJSON( )

    jQuery中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据,它使用的是GET HTTP请求.使用方法如下: $.getJSON( url [, data ] [, succ ...

  5. 教你用PS制作雨天窗户上透明水滴字

    雨天窗户上透明水滴字制作方法很简单,主要利用图层样式来实现.学习后可以让你对图层样式有更好的了解,认识. 先看下完成后的效果图: 步骤1: 在Photoshop中我们新建或Ctrl+N,创建1920x ...

  6. 技术进阶：Kubernetes高级架构与应用状态部署

    在了解Kubernetes应用状态部署前,我们先看看Kubernetes的高级架构,方便更好的理解Kubernetes的状态. Kubernetes 的高级架构 包括应用程序部署模型,服务发现和负载均 ...

  7. linux 内核 第二周 操作系统是如何工作的

    姬梦馨 原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一:计算机的三个法宝 存储程序计算机工 ...

  8. Django-项目配置

    目录 配置文件 数据库配置DATABASE - 指定MySQL数据库 数据库配置DATABASE - 指定SQL Server数据库 数据库配置DATABASE - 指定多个数据库 模版文件 静态文件 ...

  9. 继承Tcalendar控件，让当天日期醒目显示

    一.新建一控件 打开Delphi主菜单Cpmponent—New Cpmponent: 二.配置参数 点击OK键,打开Unit单元文件. 三.修改单元文件 unit LyCalendar; inter ...

  10. Spring MVC的路径匹配规则 Ant-style

    Spring默认的策略实现了 org.springframework.util.AntPathMatcher,即Apache Ant的样式路径,Apache Ant样式的路径有三种通配符匹配方法(在下 ...