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. 洛谷 P3302 [SDOI2013]森林

    ->题目链接 题解: #include<queue> #include<cstdio> #include<cstring> #include<iostr ...

  2. 初识TPOT：一个基于Python的自动化机器学习开发工具

    1. TPOT介绍 一般来讲,创建一个机器学习模型需要经历以下几步: 数据预处理 特征工程 模型选择 超参数调整 模型保存 本文介绍一个基于遗传算法的快速模型选择及调参的方法,TPOT:一种基于Pyt ...

  3. CSS快速入门-属性和伪类

    一.属性选择器 <div class="gradefather"> hello1 <div name="son">hello2 < ...

  4. [摘抄]从 GitHub 身上学到的 3 个创业经验

    1.找一个大问题去解决 让 Git 更容易使用是 GitHub 的目标,但它从来不是 GitHub 的最终目标.GitHub 的真正目标是让协作和编写软件变得更容易.世界上每一个软件开发者都在努力解决 ...

  5. Centos 7 部署Kubernetes(K8S)集群

    资源链接:https://pan.baidu.com/s/1-PT_QQAf7cTu_znX-S-r9Q 密码:33sr 转发:http://blog.51cto.com/lizhenliang/19 ...

  6. pandas 初识（三）

    Python Pandas 空值 pandas 判断指定列是否(全部)为NaN(空值) import pandas as pd import numpy as np df = pd.DataFrame ...

  7. Android 测试之Monkey

    一.什么是Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进 ...

  8. ats反向代理和重定向

    作为反向代理缓存,ats代表源服务器提供的请求. ats的配置方式使客户端看起来像普通的原始服务器. 了解反向代理缓存通过转发代理缓存, ats代表请求内容的客户端队里对源服务器的web请求.反向代理 ...

  9. Linux内核分析作业 NO.1

    通过汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的 于佳心 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/cour ...

  10. LINUX内核分析第五周学习总结——扒开应用系统的三层皮（下）

    LINUX内核分析第五周学习总结——扒开应用系统的三层皮(下) 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163.com/cou ...